language - 將JavaScript代碼放入<a>的不同方法之間有什麼區別?




script src (5)

僅限現代瀏覽器

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function(doc){
    var hasClass = function(el,className) {
        return (' ' + el.className + ' ').indexOf(' ' + className + ' ') > -1;
    }
    doc.addEventListener('click', function(e){
      if(hasClass(e.target, 'click-me')){
          e.preventDefault();
          doSomething.call(e.target, e);
      }
    });
})(document);

function doSomething(event){
  console.log(this); // this will be the clicked element
}
</script>
<!--... other head stuff ...-->
</head>
<body>

<!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 -->
<button class="click-me">Button 1</button>
<input class="click-me" type="button" value="Button 2">

</body>
</html>

跨瀏覽器

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function(doc){
    var cb_addEventListener = function(obj, evt, fnc) {
        // W3C model
        if (obj.addEventListener) {
            obj.addEventListener(evt, fnc, false);
            return true;
        } 
        // Microsoft model
        else if (obj.attachEvent) {
            return obj.attachEvent('on' + evt, fnc);
        }
        // Browser don't support W3C or MSFT model, go on with traditional
        else {
            evt = 'on'+evt;
            if(typeof obj[evt] === 'function'){
                // Object already has a function on traditional
                // Let's wrap it with our own function inside another function
                fnc = (function(f1,f2){
                    return function(){
                        f1.apply(this,arguments);
                        f2.apply(this,arguments);
                    }
                })(obj[evt], fnc);
            }
            obj[evt] = fnc;
            return true;
        }
        return false;
    };
    var hasClass = function(el,className) {
        return (' ' + el.className + ' ').indexOf(' ' + className + ' ') > -1;
    }

    cb_addEventListener(doc, 'click', function(e){
      if(hasClass(e.target, 'click-me')){
          e.preventDefault ? e.preventDefault() : e.returnValue = false;
          doSomething.call(e.target, e);
      }
    });
})(document);

function doSomething(event){
  console.log(this); // this will be the clicked element
}
</script>
<!--... other head stuff ...-->
</head>
<body>

<!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 -->
<button class="click-me">Button 1</button>
<input class="click-me" type="button" value="Button 2">

</body>
</html>

您可以在文檔準備就緒之前運行它,單擊這些按鈕將生效,因為我們將該事件附加到文檔。

資料來源:

我已經看到了將JavaScript代碼放入<a>標籤的下列方法:

function DoSomething() { ... return false; }
  1. <a href="javascript:;" onClick="return DoSomething();">link</a>
  2. <a href="javascript:DoSomething();">link</a>
  3. <a href="javascript:void(0);" onClick="return DoSomething();">link</a>
  4. <a href="#" onClick="return DoSomething();">link</a>

我理解嘗試放置有效的URL而不僅僅是JavaScript代碼的想法,以防萬一用戶沒有啟用JavaScript。 但為了本次討論的目的,我需要假設啟用了JavaScript(如果沒有它,他們將無法登錄)。

我個人喜歡選項2,因為它允許您查看將要運行的內容 - 在調試傳遞給函數的參數的位置時尤其有用。 我已經使用了它,並沒有發現瀏覽器問題。

我讀過,人們推薦4,因為它給用戶一個真正的鏈接,但真的,#不是“真正的”。 它絕對不會在哪裡。

當你知道用戶啟用了JavaScript時,有沒有支持或者真的很糟糕?

相關問題: Href for JavaScript鏈接:“#”或“javascript:void(0)”?


你忘了另一種方法:

5: <a href="#" id="myLink">Link</a>

使用JavaScript代碼:

document.getElementById('myLink').onclick = function() {
    // Do stuff.
};

我無法評論哪些選項具有最佳支持,哪些選項在語義上最好,但我只是說我更喜歡這種風格,因為它將您的內容與JavaScript代碼分開。 它將所有的JavaScript代碼保存在一起,這更容易維護(特別是如果您將它應用於多個鏈接),甚至可以將其放在一個外部文件中,然後將其打包以減少客戶端瀏覽器的文件大小和緩存。


我非常喜歡Matt Kruse的Javascript最佳實踐文章 。 其中,他表示使用href節執行JavaScript代碼是一個不好的主意。 即使您聲明您的用戶必須啟用JavaScript,但如果有人在登錄後關閉JavaScript,您就沒有理由不能擁有一個簡單的HTML頁面,您的JavaScript鏈接可以指向他們的href部分。我會極力鼓勵你仍然允許這種回退機制。 像這樣的東西將堅持“最佳實踐”,並實現您的目標:

<a href="javascript_required.html" onclick="doSomething(); return false;">go</a>

方法#2在FF3和IE7中有語法錯誤。 我更喜歡方法#1和#3,因為#4用'#'弄髒了URI,儘管導致輸入更少......顯然,正如其他響應所指出的,最好的解決方案是將單獨的html與事件處理分開。


<a href="#" onClick="DoSomething(); return false;">link</a>

我會這樣做,或者:

<a href="#" id = "Link">link</a>
(document.getElementById("Link")).onclick = function() {
    DoSomething();
    return false;
};

取決於情況。 對於較大的應用程序,第二個是最好的,因為它然後合併您的事件代碼。





href