代码之家 › 专栏 › 技术社区 › Krumelur

执行锚的href,但不执行底层DIV的“onclick”?

javascript html

Krumelur · 技术社区 · 14 年前

请参见下面截图中的代码/html。我有一个带有“href”的锚,它位于带有“onclick”事件处理程序的DIV中。如果我单击锚,浏览器将打开一个新的选项卡并执行“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>

任

2 回复 | 直到 14 年前

InvisibleBacon 14 年前

最简单的方法是停止onclick事件从anchor标记传播到div。只需向anchor添加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>

casablanca 14 年前

给你的主播一个身份证 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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

5 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

5 月前

Alex · 在轻量级中同时解构和不解构变量

5 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

5 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

5 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

5 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

5 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

5 月前

user3472810 · Angular@Output/EventEmitter返回undefined

5 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

5 月前