問題描述：
今天在調試頁面的時候遇到一個奇怪的現象，在一個父元素上面定義了一個點擊事件，在父元素下面是一個一個的li標籤，這上面沒有任何點擊事件。現象是當點擊其中一個li標籤時會發生一些動作。
這個問題困惑了我好久，我對代碼翻了好幾遍，最後才確定是，點擊子項目時也將會觸發父元素的事件。當時我把這種現象是在父元素上定義點擊事件時，實際上是在這個地區中都定義了點擊事件，所以當點擊子項目時，實際上也是在點擊父元素。
但是更科學的解釋是：如果在點擊子項目時，如果子項目中沒有點擊事件，那麼該點擊事件將自動冒泡到父元素，直到能找到一個可以處理點擊事件的函數。
那這種解釋可以帶來的好處是，可以有方法來屏蔽這種現象，那就是阻止點擊事件的冒泡。對於jQuery而言，就是stopPropagation().對於下面的代碼而言，大家可以嘗試下，如果沒有stopPropagation和有stopPropagation之間的差別。
代碼如下：
<!DOCTYPE html><html><meta http-equiv="content-type" content="text/html;charset=utf8"><link rel="stylesheet" type="text/css" href=""><script src="./jQuery/jquery-2.1.4.js"></script><script type="text/javascript"> $(function() { $("#maindiv").click(function(event) { if($(this).children('ul').css("display") == "none") $(this).children('ul').css("display","block"); else $(this).children('ul').css('display',"none"); }); //阻止向上冒泡 $("#maindiv > ul").click(function(event) { event.stopPropagation(); }); });</script><title>測試如何屏蔽子項目的事件</title><body> <div id="maindiv"> <button>click me</button> <ul style="display:none"> <li>first</li> <li>second</li> <li>third</li> </ul> </div></body></html>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
