[轉]html里a標簽中href調用js的幾種方法


文章轉自:https://blog.csdn.net/best_luxi/article/details/45062301

我們常用的在a標簽中有點擊事件: 
1. a href=”javascript:js_method();”

這是我們平台上常用的方法,但是這種方法在傳遞this等參數的時候很容易出問題,而且javascript:協議作為a的href屬性的時候不僅會導致不必要的觸發window.onbeforeunload事件,在IE里面更會使gif動畫圖片停止播放。W3C標准不推薦在href里面執行javascript語句。

 

a href=”javascript:void(0);” onclick=”js_method()”

這種方法是很多網站最常用的方法,也是最周全的方法,onclick方法負責執行js函數,而void是一個操作符,void(0)返回undefined,地址不發生跳轉。而且這種方法不會像第一種方法一樣直接將js方法暴露在瀏覽器的狀態欄。

 

3.a href=”javascript:;” onclick=”js_method()”

這種方法跟跟2種類似,區別只是執行了一條空的js代碼。

 

4.a href=”#” onclick=”js_method()”

這種方法也是網上很常見的代碼,#是標簽內置的一個方法,代表top的作用。所以用這種方法點擊后網頁后返回到頁面的最頂端。

 

5.a href=”#” onclick=”js_method();return false;”

這種方法點擊執行了js函數后return false,頁面不發生跳轉,執行后還是在頁面的當前位置。

 

我看了下taobao的主頁,他們采用的是第2種方法,而alibaba的主頁是采用的第1種方法,和我們的區別是每個href里的javascript方法都用try、catch包圍。

 

綜合上述,在a中調用js函數最適當的方法推薦使用: 
a href=”javascript:void(0);” onclick=”js_method()” 
a href=”javascript:;” onclick=”js_method()” 
a href=”#” onclick=”js_method();return false;”

 

示例代碼:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-Type" content="text/html" charset="utf-8">
  <title>瀏覽器對象</title>
</head>
<body>
   <h2>操作成功</h2>
   <span id="time">5</span>秒后回到主頁<a href="javascript:goBack()">返回</a>
 
 <script type="text/javascript">
    var i = 5;
    var t = setInterval(function clock(){
    i--;
    time.innerHTML= i;
    if (i==1) {
      window.location.assign("http://www.sina.com");
    } 
  } ,1000);
 
  function goBack(){
      varwindow.history.back();
  }
 
 </script>
</body>
</html>

 

 

  1. <!DOCTYPE html>
  2.  
    <html>
  3.  
    <head>
  4.  
    <meta http-equiv="content-Type" content="text/html" charset="utf-8">
  5.  
    <title>瀏覽器對象 </title>
  6.  
    </head>
  7.  
    <body>
  8.  
    <h2>操作成功 </h2>
  9.  
    <span id="time">5 </span>秒后回到主頁 <a href="javascript:goBack()">返回 </a>
  10.  
     
  11.  
    <script type="text/javascript">
  12.  
    var i = 5;
  13.  
    var t = setInterval( function clock(){
  14.  
    i--;
  15.  
    time.innerHTML= i;
  16.  
    if (i== 1) {
  17.  
    window.location.assign( "http://www.sina.com");
  18.  
    }
  19.  
    } , 1000);
  20.  
     
  21.  
    function goBack(){
  22.  
    varwindow.history.back();
  23.  
    }
  24.  
     
  25.  
    </script>
  26.  
    </body>
  27.  
    </html>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM