不要用return false阻止event的預設行為
當我們點選一個a
標籤時,如果這個標籤的href
指向了另一個地址,那麼瀏覽器會預設跳轉到此地址。在頁面中,有時我們需要觸發點選事件,但是又不想觸發預設行為,就需要阻止event
的預設行為了。
常規做法
眾所周知,IE早期版本的event
物件與DOM標準中的event
物件並不相同,所以一般的相容性寫法是這樣的:
if (event.preventDefault) {
event.preventDefault(); //支援DOM標準的瀏覽器
} else {
event.returnValue = false; //IE
}
非常規
在原生JS下
但是還有一種人,喜歡在函式結尾用return false;
來阻止event
預設行為,不過這種方法覆蓋面不全,不建議使用,先來看規範是如何定義的:
W3C Document Object Model Events Specification 1.3.1版中。事件註冊介面 提及到:
handleEvent
This method is called whenever an event occurs of the type for which the EventListener interface was registered. [...] No Return Value
在 1.2.4. Event Cancelation 文件中也提到:
Cancelation is accomplished by calling the Event's
preventDefault
method. If one or more EventListeners callpreventDefault
during any phase of event flow the default action will be canceled.
HTML5 Section 6.1.5.1 of the HTML Spec規範定義如下:
Otherwise
If return value is a WebIDL boolean false value, then cancel the event.
為什麼要OtherWise,因為規範中有指出在mouseover
等幾種特殊事件情況下,return false;
並不一定能終止事件。
所以,在實際使用中,請儘量避免通過return false;
的方式來取消事件的預設行為。
在jQuery下:
jQuery中,就不是簡單的覆蓋面和規範的問題了。在jQuery事件處理函式中呼叫return false;
相當於同時呼叫了preventDefault
和stopPropagation
方法,這會導致當前元素的事件無法向上冒泡,在事件代理模式下,會導致問題。
比如,我有一個div
容器,裡面是 幾個a
標籤,它們的href
裡分別儲存了url
地址,這個url
被用來動態的載入到下面的div#content
中,這裡為了簡單演示,就只把url
字串寫入到div#content
中:
<div id="container">
<a href="/content1.html">content1</a>
<a href="/content2.html">content2</a>
<div id="content">我會根據點選連結的url不同而改變的</div>
</div>
// 為container下的所有a標籤繫結click事件處理函式
$("#container").click(function (e) {
if (e.target.nodeName == "A") {
$("#content").html(e.target.href);
}
});
// 再為a標籤繫結click事件處理函式,阻止預設事件
$("#container a").click(function () {
return false;
});
上面的程式碼執行後,雖然阻止了a
標籤的點選預設行為,但同時停止了冒泡事件,導致其外層的父元素無法檢測到click
事件,所以jQuery中請明白return false;
和preventDefault
二者的區別。
總結
不要用return false;
來阻止event
的預設行為
相關文章
- 原生javascript的return false並不能阻止事件冒泡JavaScriptFalse事件
- JavaScript return falseJavaScriptFalse
- js中return、return true、return false的區別JSFalse
- JavaScript return false的作用JavaScriptFalse
- JavaScript阻止冒泡和取消事件預設行為JavaScript事件
- Web:移動端阻止預設行為的小坑Web
- jQuery阻止事件冒泡和預設行為程式碼jQuery事件
- 阻止事件冒泡(stopPropagation和cancelBubble)和阻止預設行為(preventDefault和returnValue)事件
- preventDefault()與return false區別False
- return false影響事件冒泡False事件
- jQuey return false作用是什麼False
- js跳出迴圈的方法區別( break, continue, return ) 及 $.each 的(return true 和 return false)...JSFalse
- [轉] 由表單中 onsubmit="return false;" 想到的MITFalse
- 阻止冒泡和阻止預設事件的相容寫法事件
- CSS 中 stopPropagation, preventDefault 和 return false 的區別CSSFalse
- preventDefault,stopPropagation,return false三者的區別False
- JavaScript阻止預設動作JavaScript
- JavaScript 阻止預設動作JavaScript
- 阻止游標預設事件事件
- 【JS基礎】阻止預設操作JS
- 內部Fragment設定為public static和checkReleaseBuilds false與abortOnError falseFragmentUIFalseError
- 阻止a標籤預設跳轉事件事件
- Flutter url_launcher 報錯 canLaunch will return false(Android)的解決辦法FlutterFalseAndroid
- 為什麼要用大家熟知的設計模型模型
- JS-preventDefault() 取消預設行為JS
- python為什麼要用執行緒Python執行緒
- JavaScript事件冒泡、事件捕獲和阻止預設事件JavaScript事件
- js五種為false的判斷JSFalse
- jQuery學習筆記02--讀取和操作屬性,讀取和操作屬性節點,新增、刪除、改變類,操作html、css、value,操作事件,事件冒泡及阻止事件冒泡,預設行為及阻止預設行為,自動觸發事件jQuery筆記HTMLCSS事件
- JavaScript禁止瀏覽器預設行為JavaScript瀏覽器
- C++程式設計師看過來,false < false的設定恰當嗎?C++程式設計師False
- 禁用手機預設的觸屏滾動行為
- if 判斷為 false 的 6 種情況False
- true || false && falseFalse
- MySQL修改表預設字符集行為MySql
- 利用CheckForIllegalCrossThreadCalls=false設定跨執行緒訪問ROSthreadFalse執行緒
- C++中為什麼要用指標,而不直接使用物件?C++指標物件
- finally語句在return執行之後,return返回之前執行