return false;和e.preventDefault();的區(qū)別
更新時(shí)間：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
測(cè)試代碼打包下載
您可能感興趣的文章:
相關(guān)文章
在js中,對(duì)象是鍵值對(duì)的集合,可以通過(guò)很多種方式創(chuàng)建； 本文給大家介紹了六種創(chuàng)建方式：對(duì)象字面量、構(gòu)造函數(shù)、Object.create()、工廠函數(shù)、class、單例模式,需要的朋友可以參考下2025-04-04
js的隱含參數(shù)(arguments,callee,caller)使用方法
本篇文章只要是對(duì)js的隱含參數(shù)(arguments,callee,caller)使用方法進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
這篇文章主要為大家詳細(xì)介紹了JavaScript仿聊天室聊天記錄實(shí)現(xiàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
JavaScript實(shí)現(xiàn)將UPC轉(zhuǎn)換成ISBN的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)將UPC轉(zhuǎn)換成ISBN的方法,涉及javascript字符串操作的相關(guān)技巧,需要的朋友可以參考下2015-05-05
下面小編就為大家?guī)?lái)一篇JS之相等操作符詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
基于JS實(shí)現(xiàn)數(shù)字動(dòng)態(tài)變化顯示效果附源碼
我們經(jīng)常看到液晶電子表樣式，數(shù)字動(dòng)態(tài)顯示，動(dòng)態(tài)變化的在指定元素內(nèi)顯示數(shù)字。怎么實(shí)現(xiàn)效果呢？下面小編給大家?guī)?lái)了基于JS實(shí)現(xiàn)數(shù)字動(dòng)態(tài)變化顯示效果 ，感興趣的朋友一起看看吧2019-07-07
菜單制作學(xué)習(xí)一個(gè)小東西...2006-09-09
可以使用 e.stopPropagation(); e.preventDefault();來(lái)阻止事件冒泡，和默認(rèn)事件的執(zhí)行。但不能阻止事件的追加，如要追加，請(qǐng)看下面的實(shí)現(xiàn)方法2014-10-10
利用location.hash實(shí)現(xiàn)跨域iframe自適應(yīng)
其他一些類似js跨域操作問(wèn)題也可以按這個(gè)思路去解決，需要的朋友可以測(cè)試下。2010-05-05
使用JavaScript實(shí)現(xiàn)輪播圖效果完整實(shí)例
我們?cè)诟鞣N網(wǎng)頁(yè)中經(jīng)常見到輪播圖的效果,下面這篇文章主要給大家介紹了關(guān)于使用JavaScript實(shí)現(xiàn)輪播圖效果的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01