div里面的按钮,不发送div onclick - JavaScript

Question

我有一个div,那个div有一个onclick事件.在div的内部,有一些文本和一个按钮.当我点击文本时,会发送div onclick,这很好.但是,当我单击div内的按钮时,会发送按钮和 div 的onclick .我知道这意味着要发生,但我需要它不会发生.有没有办法,不使用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>

演示