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 click事件上调用的东西，它可以使事件继续进行父事件绑定。

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/

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

3 个答案: