a標籤上的onclick事件


Posted by hoyi-23 on 2021-06-09

在a標籤上除了使用href外,也可以加上onclick告知點擊後執行的事件。
先來看看下面的範例:

<a href="google.com">Google</a>
<a onclick="alert('1')">超連結1</a><br>
<a href="#" onclick="alert('2')">超連結2</a>
<a href="javascript:alert('3')">超連結3</a>

上面的範例中:

  1. 第一個是最基本的a標籤用法,點選後會連結至href網址。
  2. 第二個使用onclick,因為沒有設定href屬性,因此,頁面上看起來是一行沒有連結的文字,並且滑鼠放在上面,也不會顯示小手的形狀。在使用者體驗上,很難讓使用者知道這是一個可以點選的超連結。但是點擊該超連結,一樣會彈出一個警告框。單擊警告框中的【確定】按鈕之後,不會跳轉到任何URL上。
  3. 第三個除了onclick也加上了href屬性值"#"。單擊該超連結,先會執行onclick屬性值中的JavaScript,彈出一個警告框。在單擊警告框中的【確定】按鈕之後,瀏覽器會自動跳轉到當前網頁的頂部(因為#)。
  4. 第四個直接將JavaScript語句寫在href屬性值中。在單擊該超連結時,可以執行href屬性值中的JavaScript語句,而且可以避免任何跳轉。

#onclick #a







Related Posts

[JS] 全面解析reduce()函數(一)

[JS] 全面解析reduce()函數(一)

執行緒與同步、非同步概念

執行緒與同步、非同步概念

CSS 預處理器:Sass

CSS 預處理器:Sass


Comments