单击子元素时，如何停止为父元素触发 onclick 事件？

IT技术 javascript html events onclick
2021-03-03 05:20:33

我有两个关于 onclick 事件的问题，它们有些相似，所以我会在这里问他们两个。

第一的：

我在 div 中有一个复选框。输入有一个 onchange 函数，div 有一个 onclick 函数。

<div onclick="doSomething()">
     <input type="checkbox" onchange="doSomethingElse()" />
</div>

问题是当我选中/取消选中 doSomething() 和 doSomethingElse() 复选框时。关于如何阻止这种情况发生的任何想法？我试过做 onchange="doSomethingElse(event)" 和在 doSomethingElse(e) 函数中我有 e.stopPropagation(); 这没有用。

第二：

我在 div 中有一个图像。div 具有 onclick 功能，但图像没有。图像故意大于 div 并溢出 div 之外。

-----------------------
|        image        |
|   ---------------   |
|   |     div     |   |
|   |             |   |
|   ---------------   |
|                     |
-----------------------

如果用户在 div 框的边界内单击，我只希望 onclick 触发。但是，如果您单击溢出到 div 外部的图像部分，也会触发 onclick 事件...有什么想法吗？

第一个问题对我来说比第二个问题更重要。但如果有人能同时回答这两个问题，那就太棒了！

预先感谢您的帮助，
马特

6个回答

对于您的第一个问题：IE 不支持stopPropagation()，而您应该使用e.cancelBubble = true. 只需先进行功能检查，找出应该使用哪种方法 ( if (e.stopPropagation) {code})。

对于您的第二个问题：也许包含处理点击事件的第二个 div？

<div><img src="image.jpg"/></div>
<div style="position:absolute" onclick="doSomething();"></div>

然后正确定位第二个 div

对于你的第二个问题，你可以获取点击事件发生时指针的坐标，并将它们与div的坐标进行比较。（实际实现取决于你使用的js库）

对于您的第一个问题，要阻止事件冒泡，您必须使用

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

在 div 中带有复选框的第一个示例中，onchange 与 onclick 事件不同，因此在 onchange 处理程序中调用 event.stopPropagation() 不会阻止外部 onclick 触发。您需要在复选框上添加一个额外的 onclick 处理程序，以防止点击冒泡。

<div onclick="doSomething()">
     <input type="checkbox" onclick="event.stopPropagation()" onchange="doSomethingElse()" />
</div>

您需要停止传播。您可以为此使用 jQuery：停止传播。

第二：

也可以看看： 

[img onmousedown="if (!clicking) alert('parent clicked') " ...]

[div onmousedown="clicking = true"
     onclick = " alert('child clicked") "
     onmouseup="clicking = false"
其它你可能感兴趣的问题
上一篇Node.js 异步/等待module导出 下一篇从范围中排除某些字符 - javascript正则表达式