javascript - 如何使用 javascript 阻止函数

Question

我有两个要素：

<div class="a" onclick="a();">a
    <div class="b" onclick="b();">b</div>
</div>

当我单击 a 时，只是警报 a 即将到来，但是当我单击 b 时，我只想看到警报 b。

我认为这个例子更好地解释了我。

http://jsbin.com/Aruciyi/1/edit?html,css,js,输出

例如，如何通过单击红色块获得警报 b...

Answer 1

使用event.stopPropagation，像这样：

function b(event){
    event = event || window.event;
    event.stopPropagation();
    alert('b');
}

这会将点击事件捕获在内部 div 中，并防止它冒泡到外部 div。

另外：更改您的 onclick 属性，如下所示：

<div class="b" onclick="b(event);">b</div>

所以你明确地将event对象传递给b函数。

Answer 2

提供的答案有效，但我更喜欢创建一个通用点击功能。我将您的课程更改为 ID，以便更容易获得它们。这是代码：

<div id="a" onclick="clickEvent(event, this);">a
  <div id="b" onclick="clickEvent(event, this);">b</div>
</div>

JavaScript：

function clickEvent(e, o) {
  alert(o.id);
  event = e || window.event;
  event.stopPropagation();
}

这是一个演示