stopPropagation（）無法正常工作

Question

單擊圖像時我想停止鼓泡。 我無法根據需要在href上設置javascript無效。 我已經使用了stopPropagation，但是它不起作用。

function showurl(e){
    e.stopPropagation()
    window.location="http://www.yahoo.co.in"
    }

<a href="http://www.google.com">
<img src="http://media.expedia.com/media/content/shared/images/navigation/expedia.co.in.png" onclick="showurl(event)" />
</a>

Answer 1

由於這是一個jQuery問題，我建議您不要使用onclick屬性。 它們僅支持單個處理程序，並且它們是“丑陋的”（閱讀：很難找到和維護）：）

$('img").onclick = function(e) {
     e.preventDefault();
     window.location="http://www.yahoo.co.in";
}

要么

$('img").onclick = function() {
     window.location="http://www.yahoo.co.in";
     // return false here does the same as e.stopPropagation() and e.preventDefault();
     return false;
}

由於此處理程序適用於所有img元素，因此您可能希望像這樣使用屬性來驅動整個事物：

將目標網址作為data-url屬性放置在圖片中

<a href="http://www.google.com">
<img src="http://media.expedia.com/media/content/shared/images/navigation/expedia.co.in.png"
     data-url="http://www.yahoo.co.in" />
</a>

和代碼明智的：

$('img").onclick = function(e) {
     // See if image has a data-url attribute
     var url = $(this).data('url');
     if (url){
         window.location=url;
         // only prevent default if it was an image with a link attribute
         e.preventDefault();
     }
}

Answer 2

我建議即使是基本的onclick也可以從JS綁定它，然后使用return false; onclick 或使用preventDefault 。 （ 演示 ）

document.getElementsByTagName("img")[0].onclick = function() {
    window.location="http://www.yahoo.co.in";
    return false;
}

HTML

<a href="http://www.google.com">
    <img src="http://media.expedia.com/media/content/shared/images/navigation/expedia.co.in.png" />
</a>