Divイベントバブリング

Question

私のプロジェクトでは、ウィンドウのクリックeventListenerとdiv要素のいくつかのクリックイベントがあります。 divをクリックすると、このdiv要素のclickイベント（正しい）とウィンドウのclick eventListenerが起動します（正しくはありません）。

divをドラッグして、ウィンドウのclickイベントリスナーがイベントを発生させないようにすることはできますか？より良いデモンストレーションjsfiddleについては

：

window.addEventListener('mouseup', onDocumentMouseUp, false); 
 

 
function onDocumentMouseUp(event){ 
 
\t alert('dont fire this event on button click') 
 
} 
 

 
$('#button').on({ 
 
    click: function (event) { 
 
\t \t alert('button click event'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="button" style="height: 30px; width: 30px; background: blue"></div>

私は、誰かが私を助けることができると思います。

Answer 1

はい、あなたはこのようなevent.stopPropagation()を使用することができます。

$('#button').on({ 
    click: function (event) { 
     alert('button click event'); 
     event.stopPropagation(); 
    } 
});