Question

我想在点击图片时停止冒泡。我不能在href上设置javascript void，因为它是必需的。我使用了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

我建议将其与JS绑定，即使使用基本onclick，然后使用return false;或使用preventDefault。（demo）

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>

stopPropagation（）不起作用

2 个答案: