执行锚点的href，但不是底层DIV的“onclick”？

请参阅下面的代码/ HTML。我有一个带有“onclick”事件处理程序的DIV内部的“href”的锚点。如果我点击锚点，浏览器会打开一个新选项卡并执行“onclick”。如果用户点击了锚点，我想抑制“onclick”的执行。在锚点的onclick中返回“false”会启动href。这里有什么解决方案？执行锚点的href，但不是底层DIV的“onclick”？

<html> 
<head> 
<script> 
function clicky() 
{ 
alert("Click!"); 
} 
</script> 
</head> 
<body> 
<div id="adiv" onclick="clicky()" style="border:1px solid black;background-color:red;width:400px;height:300px;"> 
<a href="http://www.gohere.but.dont.execute.onclick.com" target="_blank">a link</a> 
</div> 
</body> 
</html>

勒

来源

2010-10-20 Krumelur

http://stackoverflow.com/questions/387736/how-to-stop-event-propagation-with-inline-onclick-attribute的可能的复制。 – 2010-10-20 15:05:29

最简单的方法是停止传播（冒泡）从锚标记到div的onclick事件。只需将一个onclick事件添加到锚点并将处理程序设置为：

event.cancelBubble = true; if(event.stopPropagation) { event.stopPropagation(); }

这是跨浏览器的代码。测试IE，FF，Chrome，Safari。所以，你的代码看起来应该是现在这个样子：

<html> 
<head> 
<script> 
function clicky() 
{ 
alert("Click!"); 
} 
</script> 
</head> 
<body> 
<div id="adiv" onclick="clicky()" style="border:1px solid black;background-color:red;width:400px;height:300px;"> 
<a href="http://www.gohere.but.dont.execute.onclick.com" target="_blank" onclick="event.cancelBubble = true; if(event.stopPropagation) { event.stopPropagation(); }">a link</a> 
</div> 
</body> 
</html>

来源

2010-10-20 15:21:45 InvisibleBacon

如果您使用的是jQuery，版本1.4.3现在支持.bind（“click”，false），这将防止默认操作并停止事件冒泡）。 – Richard 2010-10-20 15:32:38

是的，jquery使这种事情更容易。我只是给原始的JavaScript解决方案。但是真的，作者应该研究一个像jquery这样的JavaScript库。应该让这些简单的操作更容易管理。 – InvisibleBacon 2010-10-20 15:41:34

该解决方案如何跨浏览器兼容？ IE将事件作为参数传递，FF使用window.event。您的解决方案使用“event”，它等于window.event。困惑。 – Krumelur 2010-10-21 09:43:29

给你的锚的ID，并在DIV的onclick处理程序，检查事件的目标是你的锚：

<div id="adiv" onclick="clicky(event)" style="border:1px solid black;background-color:red;width:400px;height:300px;"> 
<a id="link" href="http://www.gohere.but.dont.execute.onclick.com" target="_blank">a link</a> 

<script> 
function clicky(event) { 
    event = event || window.event; 
    var target = event.target || event.srcElement; 
    if (target == document.getElementById('link')) 
    return true; 
    alert("Click!"); 
} 
</script>

来源

2010-10-20 15:10:10 casablanca

非常有用的代码:)我喜欢纯粹的JS方法。 – 2013-06-07 07:37:56

执行锚点的href，但不是底层DIV的“onclick”？

回答

相关问题