return false;和e.preventDefault();的區(qū)別
更新時間：2010年07月11日 12:29:38 作者：
Have you ever seen those two things (in the title) being used in jQuery? Here is a simple
Have you ever seen those two things (in the title) being used in jQuery? Here is a simple example:
$("a").click(function() {
$("body").append($(this).attr("href"));
return false;
}
That code would append the href attribute as text to the body every time a link was clicked but not actually go to that link. The return false; part of that code prevents the browser from performing the default action for that link. That exact thing could be written like this:
$("a").click(function(e) {
$("body").append($(this).attr("href"));
e.preventDefault();
}
So what's the difference?
The difference is that return false; takes things a bit further in that it also prevents that event from propagating (or “bubbling up”) the DOM. The you-may-not-know-this bit is that whenever an event happens on an element, that event is triggered on every single parent element as well. So let's say you have a box inside a box. Both boxes have click events on them. Click on the inner box, a click will trigger on the outer box too, unless you prevent propagation. Like this:
演示地址:http://css-tricks.com/examples/ReturnFalse/
So in other words:
function() {
return false;
}
// IS EQUAL TO
function(e) {
e.preventDefault();
e.stopPropagation();
}
It's all probably a lot more complicated than this and articles like this probably explain it all a lot better.
復(fù)制代碼 代碼如下:
$("a").click(function() {
$("body").append($(this).attr("href"));
return false;
}
That code would append the href attribute as text to the body every time a link was clicked but not actually go to that link. The return false; part of that code prevents the browser from performing the default action for that link. That exact thing could be written like this:
復(fù)制代碼 代碼如下:
$("a").click(function(e) {
$("body").append($(this).attr("href"));
e.preventDefault();
}
So what's the difference?
The difference is that return false; takes things a bit further in that it also prevents that event from propagating (or “bubbling up”) the DOM. The you-may-not-know-this bit is that whenever an event happens on an element, that event is triggered on every single parent element as well. So let's say you have a box inside a box. Both boxes have click events on them. Click on the inner box, a click will trigger on the outer box too, unless you prevent propagation. Like this:
演示地址:http://css-tricks.com/examples/ReturnFalse/
So in other words:
復(fù)制代碼 代碼如下:
function() {
return false;
}
// IS EQUAL TO
function(e) {
e.preventDefault();
e.stopPropagation();
}
It's all probably a lot more complicated than this and articles like this probably explain it all a lot better.
參考：
1.The difference between ‘return false;' and ‘e.preventDefault();'
2.Event order
測試代碼打包下載
您可能感興趣的文章:
相關(guān)文章
在js中,對象是鍵值對的集合,可以通過很多種方式創(chuàng)建； 本文給大家介紹了六種創(chuàng)建方式：對象字面量、構(gòu)造函數(shù)、Object.create()、工廠函數(shù)、class、單例模式,需要的朋友可以參考下2025-04-04
js的隱含參數(shù)(arguments,callee,caller)使用方法
本篇文章只要是對js的隱含參數(shù)(arguments,callee,caller)使用方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
這篇文章主要為大家詳細介紹了JavaScript仿聊天室聊天記錄實現(xiàn)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
JavaScript實現(xiàn)將UPC轉(zhuǎn)換成ISBN的方法
這篇文章主要介紹了JavaScript實現(xiàn)將UPC轉(zhuǎn)換成ISBN的方法,涉及javascript字符串操作的相關(guān)技巧,需要的朋友可以參考下2015-05-05
下面小編就為大家?guī)硪黄狫S之相等操作符詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
基于JS實現(xiàn)數(shù)字動態(tài)變化顯示效果附源碼
我們經(jīng)?？吹揭壕щ娮颖順邮剑瑪?shù)字動態(tài)顯示，動態(tài)變化的在指定元素內(nèi)顯示數(shù)字。怎么實現(xiàn)效果呢？下面小編給大家?guī)砹嘶贘S實現(xiàn)數(shù)字動態(tài)變化顯示效果 ，感興趣的朋友一起看看吧2019-07-07
菜單制作學(xué)習(xí)一個小東西...2006-09-09
可以使用 e.stopPropagation(); e.preventDefault();來阻止事件冒泡，和默認事件的執(zhí)行。但不能阻止事件的追加，如要追加，請看下面的實現(xiàn)方法2014-10-10
利用location.hash實現(xiàn)跨域iframe自適應(yīng)
其他一些類似js跨域操作問題也可以按這個思路去解決，需要的朋友可以測試下。2010-05-05
我們在各種網(wǎng)頁中經(jīng)常見到輪播圖的效果,下面這篇文章主要給大家介紹了關(guān)于使用JavaScript實現(xiàn)輪播圖效果的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-01-01