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();