javascript - div内的按钮，不发送div onclick - JavaScript

Question

我有一个 div，那个 div 有一个 onclick 事件。在 div 内部，有一些文本和一个按钮。当我点击文本时，会发送 div onclick，这很好。但是，当我单击 div 内的按钮时，会发送按钮的 onclick和div。我知道这是注定要发生的，但我需要它不要发生。有没有什么办法，不使用 jQuery，在按下按钮时不发送 div onclick？

这是我当前程序的 jsFiddle

<div onclick="divClick()">
This is the div
<button name="test" onclick="buttonClick()">Click Me</button>
</div>

我真的不想用 jQuery，只想用纯 JavaScript

Answer 1

使用stopPropagation事件函数。这种方式divClick函数将不会被调用。

function buttonClick(e) {
   if (!e) e = window.event;
   e.stopPropagation();
   // do what you want
}

由于 Firefox，您需要event像这样显式发送参数：

<button name="test" onclick="buttonClick(event)">Click Me</button>

演示