在一个div中，同时存在带有onclick事件的按钮-当点击按钮时如何只触发其中一个？

Question

我正在尝试创建一个带有按钮的div，就像这样：

<div onclick="function()"><input onclick="otherfunction()" type="button"></div>

如果您点击按钮，两个事件都会触发，但我只想在点击按钮时触发按钮的事件。 我尝试更改按钮的z-index以使其覆盖div，但这没有帮助。 有什么方法可以解决这个问题吗？ 感谢您的回答， 丹尼尔 附注：对于任何拼写或语法错误，我表示抱歉，因为这不是我的母语。

- Daniel

---

你能具体说明一下你在这里想要实现什么吗？当点击dig时应该发生什么，当点击按钮时又应该发生什么？ - MDJ

我假设你的div是一个大正方形或者其他什么形状，而按钮就在这个正方形内部的某个地方，对吗？ - RST

Answer 1

需要通过 'stopPropagation' 来阻止事件冒泡。尝试以下代码：

<script>
    var test = function() {
        alert(2);
        event.stopPropagation();
    };
</script>

<div onclick="alert(1)"><input onclick="test()" type="button"></div>

- Mark Estrada

Answer 2

如果您想要停止事件传播，请使用提供的事件对象。我在此示例中选择标签名称，但您也可以提供id。请注意，直到IE 9版本，event.stopPropagation才被支持：

<div)>
    <input type="button" />
</div>    

document.getElementsByTagName('div')[0].onclick = function(e) {
    alert('div clicked');
    e.stopPropagation()
    /* do something */
}

document.getElementsByTagName('input')[0].onclick = function(e) {
    alert('button clicked');
    e.stopPropagation()
    /* do something */
}

jsfiddle

- ron tornambe