Jqeury 阻止事件冒泡
在子元素和父元素上同時(shí)綁定相同的事件氨肌,在觸發(fā)子元素事件的同時(shí),事件會(huì)冒泡繼續(xù)往上會(huì)觸發(fā)父元素的事件
<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>
在這時(shí)點(diǎn)擊li同時(shí)會(huì)alert 'show li'和 'show div'這就是事件往上冒泡了
但是大部分時(shí)候這并不是我們希望的牡拇,我們希望點(diǎn)擊li的時(shí)候只alert 'show li' 這個(gè)時(shí)候我們應(yīng)該阻止事件冒泡
在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>