return false,對(duì)阻止事件默認(rèn)動(dòng)作的一些測(cè)試代碼
更新時(shí)間：2010年11月17日 20:37:20 作者：
很明顯我們每個(gè)函數(shù)都返回false,如果返回值可以阻止事件默認(rèn)動(dòng)作，那么文本框?qū)o(wú)法輸入任何內(nèi)容。
看下面我測(cè)試的結(jié)果，注意紅的部分。
首先頁(yè)面上有一個(gè) <textarea id="test"></textarea>
我們?yōu)槠浣壎ㄒ韵率录?
test.onkeydown = function(){
return false;
}
test.onkeyup = function(){
return false;
}
test.onkeypress = function(){
return false;
}
我們分別注釋掉其中的兩個(gè)事件，每次測(cè)試僅綁定一個(gè)事件。
很明顯我們每個(gè)函數(shù)都返回false,如果返回值可以阻止事件默認(rèn)動(dòng)作，那么文本框?qū)o(wú)法輸入任何內(nèi)容。
看下面我測(cè)試的結(jié)果，注意紅的部分。
最后我分別把事件綁定兩次，每次返回false看是否能阻止默認(rèn)動(dòng)作。
還是用了一個(gè)a標(biāo)記測(cè)試onclick 返回false 是否跳轉(zhuǎn)。
可以看出瀏覽器表現(xiàn)確實(shí)不太一樣，當(dāng)然IE是最麻煩的東西了。
最意外的是在oper中 綁定down 返回false,居然也不能阻止默認(rèn)動(dòng)作。
所以以后在寫要阻止瀏覽器默認(rèn)動(dòng)作的時(shí)候，還用標(biāo)準(zhǔn)的方法比較好。（后面我提供了）
不然在多人協(xié)作的工作中，會(huì)相當(dāng)麻煩。
演示的deom 有需要的可以發(fā)郵件給我。我就不貼上來(lái)了。
/* * 用下面的代碼就不會(huì)發(fā)生悲劇了
* 最終結(jié)論
* E(e).stop(); 阻止時(shí)間冒泡
* E(e).prevent();阻止時(shí)間默認(rèn)行為
*/
var E = function(e){
e = window.event || e;
return {
stop: function() {
if (e && e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true
},
prevent: function() {
if (e && e.preventDefault) e.preventDefault();
else e.returnValue = false
}
}
}
我們?yōu)槠浣壎ㄒ韵率录?
復(fù)制代碼 代碼如下:
test.onkeydown = function(){
return false;
}
test.onkeyup = function(){
return false;
}
test.onkeypress = function(){
return false;
}
我們分別注釋掉其中的兩個(gè)事件，每次測(cè)試僅綁定一個(gè)事件。
很明顯我們每個(gè)函數(shù)都返回false,如果返回值可以阻止事件默認(rèn)動(dòng)作，那么文本框?qū)o(wú)法輸入任何內(nèi)容。
看下面我測(cè)試的結(jié)果，注意紅的部分。
最后我分別把事件綁定兩次，每次返回false看是否能阻止默認(rèn)動(dòng)作。
還是用了一個(gè)a標(biāo)記測(cè)試onclick 返回false 是否跳轉(zhuǎn)。
| 偵聽(tīng)事件返回 false 是否阻止事件默認(rèn)動(dòng)作 | |||||
|---|---|---|---|---|---|
| chrome | IE-8 | firfox | oper | Safari | |
| onkeydown | yes | yes | yes | no | yes |
| onkeyup | no | no | no | no | no |
| onkeypress | yes | yes | yes | yes | yes |
| onclick | yes | yes | yes | yes | yes |
| keydown * 2 | no | 取最后的FN結(jié)果 | no | no | no |
| keypress * 2 | no | 取最后的FN結(jié)果 | no | no | no |
| click * 2 | no | 取最后的FN結(jié)果 | no | no | no |
| e.preventDefault(); | yes | no | yes | yes(keydown:no) | yes |
| e.returnValue = false | no | yes | no | no | no |
可以看出瀏覽器表現(xiàn)確實(shí)不太一樣，當(dāng)然IE是最麻煩的東西了。
最意外的是在oper中 綁定down 返回false,居然也不能阻止默認(rèn)動(dòng)作。
所以以后在寫要阻止瀏覽器默認(rèn)動(dòng)作的時(shí)候，還用標(biāo)準(zhǔn)的方法比較好。（后面我提供了）
不然在多人協(xié)作的工作中，會(huì)相當(dāng)麻煩。
演示的deom 有需要的可以發(fā)郵件給我。我就不貼上來(lái)了。
復(fù)制代碼 代碼如下:
/* * 用下面的代碼就不會(huì)發(fā)生悲劇了
* 最終結(jié)論
* E(e).stop(); 阻止時(shí)間冒泡
* E(e).prevent();阻止時(shí)間默認(rèn)行為
*/
var E = function(e){
e = window.event || e;
return {
stop: function() {
if (e && e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true
},
prevent: function() {
if (e && e.preventDefault) e.preventDefault();
else e.returnValue = false
}
}
}
相關(guān)文章
基于uni-app開(kāi)發(fā)刻度尺組件的實(shí)現(xiàn)示例
本文主要介紹了基于uni-app開(kāi)發(fā)刻度尺組件的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
前端js實(shí)現(xiàn)文件的斷點(diǎn)續(xù)傳 后端PHP文件接收
這篇文章主要為大家詳細(xì)介紹了斷點(diǎn)續(xù)傳的簡(jiǎn)單例子，前端文件提交，后端PHP文件接收,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
11種JavaScript前端數(shù)據(jù)去重方式總結(jié)
這篇文章主要為大家總結(jié)了JavaScript去重的11種方式，各有優(yōu)缺點(diǎn)，文中的示例代碼講解詳細(xì)，具有一定的學(xué)習(xí)價(jià)值，需要的可以根據(jù)需求合理使用2023-06-06
javascript實(shí)現(xiàn)的文字加密解密
javascript實(shí)現(xiàn)的文字加密解密...2007-06-06
這篇文章主要為大家詳細(xì)介紹了微信小程序map地圖使用的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
漸變顯示漸變消失的特殊效果在使用中還是比較常見(jiàn)的，本文簡(jiǎn)單的實(shí)現(xiàn)了一個(gè)，大家如何需要可以參考下2013-08-08
JavaScript檢測(cè)瀏覽器是否支持CSS變量代碼實(shí)例
這篇文章主要介紹了JavaScript檢測(cè)瀏覽器是否支持CSS變量代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04
使用ThinkJs搭建微信中控服務(wù)的實(shí)現(xiàn)方法
這篇文章主要介紹了使用ThinkJs搭建微信中控服務(wù)的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
JS中style.display和style.visibility的區(qū)別實(shí)例說(shuō)明
下面的例子說(shuō)明了這種區(qū)別：在這個(gè)例子中，divContent1和divContent2隱藏的時(shí)候用的是style.display=none，這時(shí)候，后面的div會(huì)向上移動(dòng)，占據(jù)已經(jīng)隱藏的div的空間。divContent3和divContent4用的是style.visibility=hidden來(lái)隱藏，但是其隱藏后仍然占據(jù)原來(lái)的空間2013-03-03
js二維碼生成插件jquery.qrcode.js如何自定義LOGO
介紹如何將jquery.qrcode.min.js與jquery集成到網(wǎng)頁(yè)中,生成帶LOGO的二維碼,提供了修改代碼以支持LOGO上傳的步驟,并給出注意事項(xiàng)以確保二維碼的識(shí)別效果2024-11-11