Jquery 阻止冒泡事件（阻止父元素事件触发）

如下：有一个div，div中有一个span：

<div class="c2"><span class="c1">Hello world</span></div>

div和span各有一个class，并且各自有对应的点击方法：

<script type="text/javascript">$(function(){$(".c1").click(function(){alert("You clicked span");});$(".c2").click(function(){alert("You clicked div");});});</script>

如果我们点击"helloworld"，这会弹窗提示"You clicked span" 和"You clicked div"。

如果我们我们只想弹窗"You clicked span"，而不触发父元素的事件，即阻止事件冒泡。那么可以进行如下修改：

（1）在function函数的参数中加入event

（2）调用方法 event.stopPropagation();

<script type="text/javascript">$(function(){$(".c1").click(function(event){event.stopPropagation();alert("You clicked span");});$(".c2").click(function(){alert("You clicked div");});});</script>

这样的话，你点击"Hello world" 就只会提示 "You clicked span" 了，而不会触发父元素事件。