Zi 字媒體

[jQuery]preventDefault() , stopPropagation() , stopImmediatePropagation() 與 return false

2021/12/25

blogjohnsonluorg

最近有幸參考了對岸網友的文章，

發現我們在使用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