1. 程式人生 > >return false的使用

return false的使用

return false的使用

使用”return false“,它只會在你的回撥函式執行結束才去取消瀏覽器的預設行為,但是使用e.preventDefault,我們有更多的選擇,它可以隨時停止瀏覽器執行預設動作,而不管你將它放在函式的哪個部分。

只有當你同時需要preventDefault和stopPropagation,並且你的程式碼可以接受直到你的回撥執行完成才停止執行瀏覽器的預設行為,那你就可以使用”return false“。

讓瀏覽器停止繼續執行預設行為

 選擇使用return false還是preventDefault,stopPropagation或者stopImmediatePropagation

當你每次呼叫”return false“的時候,它實際上做了3件事情:

•event.preventDefault();
•event.stopPropagation();事件冒泡就被終止了,click事件不會被冒泡
•停止回撥函式執行並立即返回。

這3件事中用來阻止瀏覽器繼續執行預設行為的只有preventDefault,除非你想要停止事件冒泡,否則使用return false會為你的程式碼埋下很大的隱患

preventDefault()

大多數情況下,當你使用return false時,你其實真正需要的是e.preventDefault()。要使用e.preventDefault,你需要確保你傳遞了event引數到你的回掉函式中(在這個例子裡,就是那個e):


$("a").click(function (e) { 
  // e == our event data 
  e.preventDefault(); 
});

它會替我們完成所有工作,但不會阻止父節點繼續處理事件,要記住,你放在程式碼中的限制越少,你的程式碼就越靈活,也就越易於維護。

stopPropagation()

但有些情況下,你有可能需要停止事件冒泡

由於事件冒泡機制,除非在事件處理過程中被主動阻止冒泡(e.stopPropagation()),否則會將事件傳遞到document元素上。因此,在document元素上捕獲click事件,並判斷觸發事件的元素有沒有你想要的CSS類,就可以做到,動態增加的DOM元素的相應事件也能夠被正確的處理。

你點了div上除了a連結之外的地方,我們希望能發生點什麼事情(比如改變下背景什麼的),但是不能影響使用者點選a連結的行為


$("div.post").click(function () { 
  // Do the first thing; 
}); 
 
$("div.post a").click(function (e) { 
  // Don't cancel the browser's default action 
  // and don't bubble this event! 
  e.stopPropagation(); 
}); 

stopImmediatePropagation()

這個方法會停止一個事件繼續執行,不同的widgets和plugin就有可能在同一個物件上新增事件,如果遇到這種情況,那你就很有必要理解和使用stopImmediatePropagation。

return false下面的confirm不會執行

$("#btnupload").click(function (e) {        	
$.post("security/installitcheck/queryByParentId", paras, function (data) {
        		debugger;
    			if (data.code != "0") {
    				$Core.UI.message.error("未錄入裝置,不可提交!");
    				return false;
    			}
    	    	$.messager.confirm('提示', '您確定提交嗎?', function (r) {
    	    		
    	            if (r) {
    	            	var ids = "";
    	    			$.each(rows, function (k, j) {
    	    				ids += (ids == "" ? j[$id] : "," + j[$id]);
    	    			});
    	    			var paras = { ids: ids };
    	    			$.post(url, paras, function (data) {
    	    				if (data.code == "0") {
    	    					$Core.UI.message.success("提交成功!");
    	    					$dg.datagrid("load");
    	    				} else {
    	    					$Core.UI.message.error("伺服器正忙!");
    	    				}
    	    			});
    	            }
    	        });
    		});
  });

return false;下面的confirm會執行

    $("#btnupload").click(function (e) {       	
$.post("security/installitcheck/queryByParentId", paras, function (data) {
        		debugger;
    			if (data.code != "0") {
    				$Core.UI.message.error("未錄入裝置,不可提交!");
    				return false;
    			}
    	    	
    		});
        	
        	$.messager.confirm('提示', '您確定提交嗎?', function (r) {
	    		
	            if (r) {
	            	var ids = "";
	    			$.each(rows, function (k, j) {
	    				ids += (ids == "" ? j[$id] : "," + j[$id]);
	    			});
	    			var paras = { ids: ids };
	    			$.post(url, paras, function (data) {
	    				if (data.code == "0") {
	    					$Core.UI.message.success("提交成功!");
	    					$dg.datagrid("load");
	    				} else {
	    					$Core.UI.message.error("伺服器正忙!");
	    				}
	    			});
	            }
	        });
 });