【轉】HTML中A標籤與click事件的前世今生

來源:互聯網
上載者:User

標籤:style   blog   http   color   java   使用   資料   for   

在動態網頁中,常常需要在單擊超連結時處理一些資料,而不是跳轉一個網頁。在這種情況下,通常有以下三種處理方式:


不設定<a>標籤的href屬性,只設定onclick屬性。在這種處理方式下,通常超連結文本會和本文的文本以相同的形式出現,即不 會有預設的底線。當滑鼠放在超連結上也不會顯示小手的形狀(除非為該超連結設定了CSS)。因此,使用者很難知道這是一個可以點擊的超連結。


將<a>標籤的href屬性值設定為"#",並設定onclick屬性。在這種處理方式下,使用者可以很明顯地看出哪些文字是超連結。在 單擊該超連結時,也可以執行onclick屬性值中的JavaScript語句,並且不會跳轉網頁。但是,由於href的屬性值為"#",瀏覽器會自動跳 轉到當前網頁的頂部。如果當前網頁內容比較多,瀏覽器視窗出現下拉捲軸時,可以很明顯地看到跳轉,而這種跳轉往往不是網頁設計者的          本意。


在沒有為<a>標籤設定onclick屬性時,如果單擊了該超連結,瀏覽器會載入href屬性中的URL。如果href屬性值並不是一 個URL,而是一個JavaScript語句的話,那麼瀏覽器就會執行該語句。因此,可以直接將JavaScript語句寫在<a>標籤的 href屬性值中,讓href屬性代替onclick屬性。在這種處理方式下,既可以響應click事件,又可以不讓網頁跳轉。


在<a>標籤的href屬性值中添加JavaScript語句之前,必須要先使用"javascript:"語句來聲明href屬性值中的語句為JavaScript語句。否則,瀏覽器會將href屬性值中的JavaScript語句當成是URL進行載入
<html>
<head>
<title>在超連結中使用事件</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<script type="text/javascript" language="javascript">
<!--
//多添加幾個換行,讓效果明顯
for (var i=0;i<100;i++)
{
document.write("<br>");
}
-->
</script>
</head>
<body>
<a onclick="alert(‘您單擊了第二個超連結‘)">第1個超連結</a><br>
<a href="http://blog.163.com/alaskan_hu/blog/#" onclick="alert(‘您單擊了第二個超連結‘)">第2個超連結</a>
<br>
<a href="javascript:alert(‘您單擊了第三個超連結‘)">第3個超連結</a>
<br>
</body>
</html>


在本例中建立了3個超連結,這3個超連結的處理方式如下所示:


第1個超連結中,沒有設定href屬性,因此,從圖12-11中看起來好像只是一行文字,並且滑鼠放在上面的時候,也不會顯示小手的形狀。因此,很 難讓使用者知道這是一個可以點擊的超連結。但是如果使用者單擊了該超連結,會彈出一個警告框,而且單擊警告框中的【確定】按鈕之後,不會跳轉到任何URL上。


第2個超連結中,href屬性值為"#",如果單擊該超連結,先會執行onclick屬性值中的JavaScript,彈出一個警告框。在單擊警告框中的【確定】按鈕之後,瀏覽器會自動跳轉到當前網頁的頂部。


第3個超連結中,直接將JavaScript語句寫在href屬性值中。在單擊該超連結時,可以執行href屬性值中的JavaScript語句,而且不會有任何跳轉。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.