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>