jQuery取消子元素继承父元素的事件

 子元素继承父元素的事件在大部分时候对我们来说很好，而且相当有用，但是它同时也是把双刃剑，比如我点击父元素执行一个动作，但是我下面想点击子元素的时候恢复点击父元素之前的状态，这时麻烦就来了，它会先执行点击子元素所触发的事件然后紧接着会触发父元素的事件，可能看着前面的这段话有点绕，那么我们举例说明：

javascript代码：

<script type="text/javascript"> $(document).ready(function(){ $(".box").click(function(){ $(this).animate({"width":"300px"}); }) $(".button").click(function(){ $(this).parent().animate({"width":"100px"}); }); }) </script>

html代码：

<div class="box"> <div class="button">恢复点击前的宽度</div> </div>

 

css代码我这里就不再写到上面了，你可以将上面的代码复制到本地运行，你会发现点击class为box的div（后面我会以$(“.box”)做为代号）后，$(“.box”)的宽度会变成300px，这里我们假设默认宽度为100px，然后再点击class为button的div（后面我会以$(“.button”)做为代号），这时你就会发现$(“.box”)的宽度会先变为100px然后再变回300px，而我们实际想要的效果为点击$(“.button”)后$(“.box”)的宽度只变回100px而不再执行其它动作，而解决这个问题的唯一方法为在$(“.button”)的事件执行后面加上return false;就可以了，代码如下

$(".button").click(function(){ $(this).parent().animate({"width":"100px"}); return false; //神奇的代码 });

 $(sunli).unbind("dblclick").bind("dblclick", function(e) {
                    e.stopPropagation();
                    var str = "<p>" + $(this).text() + "</p>";
                    $("#nodevalue").append(str);
                });

该方法会触发父元素双击事件，怎么不让它执行父元素双击事件呢？

奇迹的方法就在下面：

   e.stopPropagation();