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

Question

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

首先:

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

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

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

第二个:

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

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

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

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

预先感谢您的帮助，
马特

Answer 1

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

对于你的第二个问题:也许包括处理点击事件的第二个 div？

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

然后正确定位第二个div