javascript - 2 个 DIV 上的不同点击事件是一个在另一个

Question

这是我测试过的代码：

div1 = document.createElement('div');
div1.setAttribute('style','width:500px;height:500px;background-color:green;');
div1.addEventListener('click',function()
    {
    alert('div1');
    });

div2 = document.createElement('div');
div1.appendChild(div2);
div2.setAttribute('style','width:200px;height:200px;background-color:red;');
div2.addEventListener('click',function()
    {
    alert('div2');
    });
document.getElementsByTagName('body')[0].appendChild(div1);

问题是，如果我点击里面的 div，我只需要一个函数调用。我不希望从父 div 获得功能，怎么可能？

Answer 1

你需要使用event.stopPropagation().

div2.addEventListener('click',function(event) {
        event.stopPropagation();// prevents  event from bubbling to parents.
        alert('div2');
}, false);

Answer 2

event.stopPropagation() https://developer.mozilla.org/en-US/docs/DOM/event.stopPropagation是您需要在内部 div 单击事件上调用的内容，这可以防止事件继续与父事件绑定。

Answer 3

您需要停止事件传播：

var div1 = document.createElement('div');
div1.setAttribute('style', 'width:500px;height:500px;background-color:green;');
div1.addEventListener('click', function () {
    alert('div1');
});

var div2 = document.createElement('div');
div1.appendChild(div2);
div2.setAttribute('style', 'width:200px;height:200px;background-color:red;');
div2.addEventListener('click', function (event) {
    alert('div2');
    event.stopPropagation();
});
document.getElementsByTagName('body')[0].appendChild(div1);

http://jsfiddle.net/KDR9R/1/