3

私がテストしたコードは次のとおりです。

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 をクリックすると、関数呼び出しが 1 つしか必要ないことです。親 div から関数を取得したくないのですが、どうすれば作成できますか?

4

3 に答える 3

5

を使用する必要がありますevent.stopPropagation()。

div2.addEventListener('click',function(event) {
        event.stopPropagation();// prevents  event from bubbling to parents.
        alert('div2');
}, false);
于 2013-05-03T10:43:29.147 に答える
2

event.stopPropagation() https://developer.mozilla.org/en-US/docs/DOM/event.stopPropagationは、内部 div クリック イベントで呼び出す必要があるものです。これにより、イベントが親イベント バインディングに継続しないようにします。

于 2013-05-03T10:44:29.913 に答える
1

イベントの伝播を停止する必要があります。

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/

于 2013-05-03T10:45:17.890 に答える