内側のdivをクリックした場合、外側のdivからのクリックイベントを防ぐ方法

Question

js clickイベントで2つのdivがあります。一方のdivはもう一方のdivにあります。

しかし、内側のものをクリックすると、外側のdivのクリックイベントが発生しないようにしたいと思います。どうすればそれを防ぐことができますか？

Answer 1

event.stopPropagation（）を使用します。

この

document.getElementById("#seconddiv").addEventListener("click", function($event){ 
    $event.stopPropagation(); 
}); 

Answer 2

使用するevent.stopPropagation同様：デフォルトで

document.getElementById('inner').addEventListener('click', function (event){ 
    event.stopPropagation(); 
    console.log ('Inner div clicked!'); 
}); 

https://jsfiddle.net/4L87qLte/

Answer 3

、あなたがハンドラを定義しているDOMの最低レベルで始まるイベント処理ターゲットイベントを処理します。

e.stopPropagation(); 

：イベントは、それが中で処理するためにあなたが意図層を越えて処理するために、あなたが希望しない場合は、あなたが同じイベントを処理するために、親チェーンの高いイベントリスナーを定義していると仮定すると、あなたは stop the propagation of the eventにする必要があります

あなたは以下の例では、その行を削除するときに何が起こるかを参照してください：

document.querySelector('.inner').addEventListener('click', function(e) { 
 
    alert('inner div clicked!'); 
 
    e.stopPropagation(); 
 
}); 
 

 
document.querySelector('.outer').addEventListener('click', function() { 
 
    alert('outer div clicked!'); 
 
});

.outer { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: blue; 
 
} 
 

 
.inner { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: green; 
 
}

<div class='outer'> 
 
    Outer 
 
    <div class='inner'> 
 
    Inner 
 
    </div> 
 
</div>