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

Question

我在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事件也会触发...任何想法？

第一个问题对我来说比第二个问题更重要.但如果有人能够回答这两个问题那就太棒了!

先谢谢你的帮助,
马特

Answer 1

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

对于你的第二个问题:可能包括处理click事件的第二个div？

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

然后正确定位第二个div

Answer 2

对于第二个问题,您可以在发生单击事件时获取指针的坐标,并将它们与div的坐标进行比较.(实际实现取决于您使用的js库)

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

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

Answer 3

对于第二个，您可以将 div 放在图像前面，而不将图像标签放在 div 内。这应该为您提供所需的功能。