Question

我有两个元素，如：

var parent = document.getElementById("el");
var child = parent.children[0];

然后是eventListener：

parent.addEventListener("click", function() {
    alert("Hello World!")
});

问题是，当您单击子项时，将触发父项单击事件。

我只想在你点击父母点击警报时，而不是当你点击孩子时。

我没有使用JQuery而且赢了。

我在google上搜索过，所有结果都使用的是e.stopPropogation，这是JQuery。

那么在普通JS中最好的方法是什么？

非常感谢。

Answer 1

您需要阻止事件冒泡到父元素。为此，您必须将另一个事件处理程序绑定到子元素：

child.addEventListener("click", function(e) {
    e.stopPropagation();
});

单击事件气泡，这意味着事件将DOM树从子节点移动到父节点，除非它的传播停止。

Answer 2

您可以检查点击元素的ID并使用它来控制触发器：

http://jsfiddle.net/nccjgtp6/

<div id="el">
    This is a thing.
    <div id="el2"> This is a second thing. </div>
</div>

var parent = document.getElementById("el");
var child = parent.children[0];

parent.addEventListener("click", function(e) {
    console.log(e);
    if(e.srcElement.id == 'el') {
        alert('Hello world');
    }
});

我不知道这是否会在所有浏览器中保持一致，但在Chrome中适用于我。

Answer 3

如果我没弄错的话，那就是你需要的event.stopPropagation();代码行。

Javascript - 防止孩子的OnClick解雇父母的OnClick - 没有JQuery

3 个答案: