Zi 字媒體

最近有幸參考了對岸網友的文章， 發現我們在使用jQuery時，通常都會習慣使用return false來停止browser繼續執行， 但實際上這樣做是有問題的！ return flase會執行以下三件事： 1.event.preventDefault(); 2.event.stopPropagation(); 3.傳回值並停止函式 例如： ("a.menu").click(function(){ ("#TheMenu").toggle(); return false; //alert將不會被執行 alert("Test"); }); 事實上我們比較常用到的是需要讓瀏覽器停止存取到a上面的網址， 這個功能其實只要preventDefault()就足夠了 preventDefault() ("a.menu").click(function(e){ ("#TheMenu").toggle(); e.preventDefault(); //alert會被執行 alert("Test"); }); stopPropagation() 當使用者需要點擊某個div的a之後，做一些動作並連到該網頁， 但如果div及a都有click事件，會發生什麼樣的狀況？ HTML： This is my test Click This jQuery： //點擊.menu後會顯示321及123 ("#TestDiv").click(function(){ alert("123"); }); ("#TestDiv .menu").click(function(){ alert("321"); }); 若改成 //點擊.menu後只會顯示321 ("#TestDiv").click(function(){ alert("123"); }); ("#TestDiv .menu").click(function(e){ alert("321"); e.stopPropagation(); }); 雖然return false可以達到一樣的效果，但就無法連結到該網頁了 stopImmediatePropagation() 這個方法比較少用到，比較常用於很繁雜的程式，同一個物件可能會有重複相同的事件操作， 為了避免重複執行stopImmediatePropagation()可以讓這些事件只執行一次 不過如果有這樣的情形，還是建議程式重構比較好= = HTML： This is my test Click This jQuery： //Click #TestDiv .menu 會顯示 456 321 123 789 ("#TestDiv").click(function(){ alert("123"); }); ("#TestDiv .menu").click(function(){ alert("456"); }); ("#TestDiv").click(function(){ alert("789"); }); ("#TestDiv .menu").click(function(){ alert("321"); }); 若改成 //Click #TestDiv .menu 會顯示 456 ("#TestDiv").click(function(){ alert("123"); }); ("#TestDiv .menu").click(function(e){ alert("456"); e.stopImmediatePropagation(); }); ("#TestDiv").click(function(){ alert("789"); }); ("#TestDiv .menu").click(function(){ alert("321"); }); Categories: jQuery 分類 Android AngularJS Chrome Database MySQL DataStructure Editor Vim Firefox Git Hadoop Language Go Java JavaScript jQuery jQueryChart Node.js Vue PHP Laravel ZendFramework Python Mac Network Cisco DLink Juniper Oauth Server Apache Share Unix FreeBSD Linux WebDesign Bootstrap CSS Wordpress Search 搜尋：