Question

最有可能这个问题有充分的记录，但我无法轻易找到答案。

我有一个div的click事件处理程序和一个嵌入的子元素。问题是，当我单击嵌入式元素处理程序（下例中的图标）时，触发了icon和子div处理程序。而期望的行为只是触发图标点击事件处理程序。

什么是最佳实践绕过这个问题？提前谢谢！

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您可以使用stopPropagation功能执行此操作：

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

1 个答案: