单击子元素时，防止触发父div的点击事件处理程序

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功能，可以这样做：

$(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>

请注意，您需要将event传递给F （我的例子中的e变量）。