不要用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
的預設行為
相關文章
- 阻止捕獲和冒泡,阻止預設行為
- js中return、return true、return false的區別JSFalse
- JavaScript return falseJavaScriptFalse
- Web:移動端阻止預設行為的小坑Web
- preventDefault()與return false區別False
- CSS 中 stopPropagation, preventDefault 和 return false 的區別CSSFalse
- JavaScript 阻止預設動作JavaScript
- JavaScript阻止預設動作JavaScript
- 阻止游標預設事件事件
- 【JS基礎】阻止預設操作JS
- Flutter url_launcher 報錯 canLaunch will return false(Android)的解決辦法FlutterFalseAndroid
- python為什麼要用執行緒Python執行緒
- JS-preventDefault() 取消預設行為JS
- js五種為false的判斷JSFalse
- jQuery學習筆記02--讀取和操作屬性,讀取和操作屬性節點,新增、刪除、改變類,操作html、css、value,操作事件,事件冒泡及阻止事件冒泡,預設行為及阻止預設行為,自動觸發事件jQuery筆記HTMLCSS事件
- finally語句在return執行之後,return返回之前執行
- true || false && falseFalse
- 如何阻止:hover、:active等滑鼠行為狀態的觸發?
- if 判斷為 false 的 6 種情況False
- HttpContext.User.Identity.IsAuthenticated 為falseHTTPContextIDEFalse
- MySQL修改表預設字符集行為MySql
- 做「容量預估」可沒有true和falseFalse
- Mozilla Firefox開始預設阻止網路跟蹤器運作Firefox
- Google和Mozilla正設法阻止哈薩克ISP強制安裝證書行為Go
- 為什麼需要用代理進行網頁抓取?網頁
- 為什麼要用dockerDocker
- 為什麼要用docker?Docker
- 為什麼要用RedisRedis
- js中bool值為false的幾種情況JSFalse
- Linux shell——列印不為0的行Linux
- 程式設計師為什麼一定要用Linux?程式設計師Linux
- 程式設計師為什麼一定要用 Linux ?程式設計師Linux
- Java中“100=100”為true,而"1000=1000"為false?JavaFalse
- 90% 的 Java 程式設計師都說不上來的為何 Java 程式碼越執行越快(2)- TLAB預熱Java程式設計師
- 從 ECMA 規範解析 JavaScript 預設的取值和賦值行為JavaScript賦值
- Event loop的化繁為簡(一)OOP
- Event loop的化繁為簡(二)OOP
- 為什麼要用混合加密?加密
- 為什麼要用SOCKS代理?