子要素をクリックしたときに親div click-eventハンドラーがトリガーされないようにする

Question

おそらくこの問題は十分に文書化されていますが、簡単に答えを見つけることができませんでした。

divと埋め込み子要素のクリックイベントハンドラがあります。そして、問題は、埋め込まれた要素ハンドラ（下の例のアイコン）をクリックすると、アイコンと子divハンドラの両方がトリガされることです。一方、希望の動作はアイコンクリックイベントハンドラのみを起動することになります。

この問題のベストプラクティスバイパスは何ですか？前もって感謝します！

$(function(){ 
 
    $('#test_button').on('click', function() { 
 
     alert('Button'); 
 
    }); 
 
     
 
    $('#test_div').on('click', function() { 
 
     alert('Div'); 
 
    }); 
 
});

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id= 'test_div'> 
 
    <i id = "test_button" class="fa fa-times" aria-hidden="true"></i> 
 
</div>

Answer 1

あなたはそうするstopPropagation機能を使用することができます：あなたがFにeventを渡す必要が

$(function(){ 
 
\t $('#test_button').on('click', function (e) { 
 
\t  e.stopPropagation(); 
 
\t  alert('Button'); 
 
    }); 
 
     
 
    $('#test_div').on('click', function() { 
 
\t  alert('Div'); 
 
    }); 
 
});

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id= 'test_div'> 
 
    <i id = "test_button" class="fa fa-times" aria-hidden="true"></i> 
 
</div>

注意私の例ではe変数です。