a標籤的herf和click事件

時間 2019-11-25

標籤標籤 herf click 事件简体版

原文原文鏈接

在動態網頁中，經常須要在單擊超連接時處理一些數據，而不是跳轉一個網頁。在這種狀況下，一般有如下三種處理方式：javascript

不設置<a>標籤的href屬性，只設置onclick屬性。在這種處理方式下，一般超連接文本會和正文的文本以相同的形式出現，即不會有默認的下劃線。當鼠標放在超連接上也不會顯示小手的形狀（除非爲該超連接設置了CSS）。所以，用戶很難知道這是一個能夠點擊的超連接。html

將<a>標籤的href屬性值設置爲"#"，並設置onclick屬性。在這種處理方式下，用戶能夠很明顯地看出哪些文字是超連接。在單擊該超連接時，也能夠執行onclick屬性值中的JavaScript語句，而且不會跳轉網頁。可是，因爲href的屬性值爲"#"，瀏覽器會自動跳轉到當前網頁的頂部。若是當前網頁內容比較多，瀏覽器窗口出現下拉滾動條時，能夠很明顯地看到跳轉，而這種跳轉每每不是網頁設計者的本意。java

在沒有爲<a>標籤設置onclick屬性時，若是單擊了該超連接，瀏覽器會加載href屬性中的URL。若是href屬性值並非一個URL，而是一個JavaScript語句的話，那麼瀏覽器就會執行該語句。所以，能夠直接將JavaScript語句寫在<a>標籤的 href屬性值中，讓href屬性代替onclick屬性。在這種處理方式下，既能夠響應click事件，又能夠不讓網頁跳轉。web

在<a>標籤的href屬性值中添加JavaScript語句以前，必需要先使用"javascript:"語句來聲明href屬性值中的語句爲JavaScript語句。不然，瀏覽器會將href屬性值中的JavaScript語句當成是URL進行加載瀏覽器

<html>
<head>
<title>在超連接中使用事件</title>
<metahttp-equiv="content-type"content="text/html;charset=gb2312">
<scripttype="text/javascript"language="javascript">
<!--
//多添加幾個換行，讓效果明顯
for(var i=0;i<100;i++)
{
document.write("<br>");
}
-->
</script>
</head>
<body>
<aonclick="alert('您單擊了第二個超連接')">第1個超連接</a><br>
<ahref="http://blog.163.com/alaskan_hu/blog/#"onclick="alert('您單擊了第二個超連接')">第2個超連接</a>
<br>
<ahref="javascript:alert('您單擊了第三個超連接')">第3個超連接</a>
<br>
</body>
</html>