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

How can I stop an onclick event from firing for parent element when child is clicked?(单击子元素时，如何阻止 onclick 事件触发父元素?)

问题描述

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

I'm having two issues with onclick events, they are somewhat similar so I'll ask them both here.

第一:

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

I have a checkbox in a div. The input has an onchange function and the div has an onclick function.

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

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

The problem is when I check/uncheck the checkbox both doSomething() and doSomethingElse() fire. Any ideas of how to stop this from occuring? I've tried doing onchange="doSomethingElse(event)" and the in doSomethingElse(e) function I had e.stopPropagation(); and this did not work.

第二:

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

I have an image in a div. The div has an onclick function but the image does not. The image is, purposely, larger than the div and overflows outside the div.

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

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

I only want the onclick to fire if the user clicks within the bounds of the div box. However, the onclick event also fires if you click on a part of the image that has overflowed to the outside of the div... Any ideas?

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

The first question is more important to me than the second. But if someone can answer both that would be awesome!

提前感谢您的帮助，
马特

Thanks in advance for your help,
Matt

推荐答案

第一个问题:IE不支持stopPropagation()，你应该使用e.cancelBubble = true.只需先做一个函数检查，看看你应该使用哪种方法(if (e.stopPropagation) {code}).

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