阻止冒泡 · PHP筆記

``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </head> <body> <div id="divOne" onclick="alert('我是最外層！')"> <div id="divTwo" onclick="alert('我是中間層！')"> <a id="hr_three" href="https://www.baidu.com" target="_blank" onclick="alert('我是最里層！')">點擊 </a> </div> </div> </body> </html> ``` 比如上面這個頁面，分為三層：divOne是第外層，divTwo中間層，hr\_three是最里層; 他們都有各自的click事件，最里層a標簽還有href屬性。運行頁面，點擊“點擊我”,會依次彈出：我是最里層---->我是中間層---->我是最外層 \---->然后再鏈接到百度. 這就是事件冒泡，本來我只點擊ID為hr\_three的標簽，但是確執行了三個alert操作。事件冒泡過程（以標簽ID表示）：hr\_three----> divTwo---->?divOne 。從最里層冒泡到最外層。如何來阻止? 1.event.stopPropagation();? ? ????????$(function() { ????????????$("#hr\_three").click(function(event) { ????????????????event.stopPropagation(); ????????????}); ????????}); ??????? 再點擊“點擊我”，會彈出：我是最里層，然后鏈接到百度 ?2.return false; 如果頭部加入的是以下代碼 $(function() { $("#hr\_three").click(function(event) { return?false; }); }); 再點擊“點擊我”，會彈出：我是最里層，但不會執行鏈接到百度頁面由此可以看出： 1.event.stopPropagation();? ???事件處理過程中，阻止了事件冒泡，但不會阻擊默認行為（它就執行了超鏈接的跳轉） 2.return false; ???事件處理過程中，阻止了事件冒泡，也阻止了默認行為（比如剛才它就沒有執行超鏈接的跳轉）還有一種有冒泡有關的： 3.event.preventDefault();? ???如果把它放在頭部A標簽的click事件中，點擊“點擊我”。 ???會發現它依次彈出：我是最里層---->我是中間層---->我是最外層，但最后卻沒有跳轉到百度 ????它的作用是：事件處理過程中，不阻擊事件冒泡，但阻擊默認行為（它只執行所有彈框，卻沒有執行超鏈接跳轉）