Jqeury 阻止事件冒泡
在子元素和父元素上同时绑定相同的事件,在触发子元素事件的同时,事件会冒泡继续往上会触发父元素的事件
<div id='div1'>12313212
<li>8iaaaa</li>
<li>9iaaaa</li>
<li>10iaaaa</li>
</div>
<script>
$("#div1").click(function(event) {
alert('show div');
});
$("#div1").on('click', 'li', function(event) {
alert(‘show li’);
});
</script>
在这时点击li同时会alert 'show li'和 'show div'这就是事件往上冒泡了
但是大部分时候这并不是我们希望的,我们希望点击li的时候只alert 'show li' 这个时候我们应该阻止事件冒泡
在Jquery中可以使用 event.stopPropagation()来阻止事件冒泡
<div id='div1'>12313212
<li>8iaaaa</li>
<li>9iaaaa</li>
<li>10iaaaa</li>
</div>
<script>
$("#div1").click(function(event) {
alert('show div');
});
$("#div1").on('click', 'li', function(event) {
alert(‘show li’);
event.stopPropagation();
});
</script>