执行锚的href，而不执行基础DIV的“ onclick”？

Question

请参见下面的代码/ HTML。 我有一个带有“ href”的锚，该锚位于具有“ onclick”事件处理程序的DIV中。 如果单击锚点，浏览器将打开一个新选项卡，并且将执行“ onclick”。 万一用户单击锚点，我想禁止执行“ onclick”。 在锚点事件的onclick中返回“ false”将触发href。 这里有什么解决方案？

<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>

雷内

Answer 1

最简单的方法是停止onclick事件从锚标记到div的传播（冒泡）。 只需将一个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>

Answer 2

给您的锚点一个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>

执行锚的href，而不执行基础DIV的“ onclick”？

问题描述

2 个解决方案

解决方案1
7 已采纳 2010-10-20 15:21:45

解决方案2
3 2010-10-20 15:10:10

执行锚的href，而不执行基础DIV的“ onclick”？

问题描述

2 个解决方案

解决方案1 7 已采纳 2010-10-20 15:21:45

解决方案2 3 2010-10-20 15:10:10

解决方案1
7 已采纳 2010-10-20 15:21:45

解决方案2
3 2010-10-20 15:10:10