Heim Web-Frontend js-Tutorial return false,对阻止事件默认动作的一些测试代码_javascript技巧

return false,对阻止事件默认动作的一些测试代码_javascript技巧

May 16, 2016 pm 06:16 PM
false return

首先页面上有一个
我们为其绑定以下事件

复制代码 代码如下:

test.onkeydown = function(){
return false;
}

test.onkeyup = function(){
return false;
}

test.onkeypress = function(){
return false;
}

我们分别注释掉其中的两个事件,每次测试仅绑定一个事件。
很明显我们每个函数都返回false,如果返回值可以阻止事件默认动作,那么文本框将无法输入任何内容。
看下面我测试的结果,注意红的部分。
最后我分别把事件绑定两次,每次返回false看是否能阻止默认动作。
还是用了一个a标记测试onclick 返回false 是否跳转。
侦听事件返回 false 是否阻止事件默认动作
  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结果 no no no
keypress * 2 no 取最后的FN结果 no no no
click * 2 no 取最后的FN结果 no no no
e.preventDefault(); yes no yes yes(keydown:no) yes
e.returnValue = false no yes no no no

可以看出浏览器表现确实不太一样,当然IE是最麻烦的东西了。
最意外的是在oper中 绑定down 返回false,居然也不能阻止默认动作。
所以以后在写要阻止浏览器默认动作的时候,还用标准的方法比较好。(后面我提供了)
不然在多人协作的工作中,会相当麻烦。
演示的deom 有需要的可以发邮件给我。我就不贴上来了。
复制代码 代码如下:

/* * 用下面的代码就不会发生悲剧了
* 最终结论
* E(e).stop(); 阻止时间冒泡
* E(e).prevent();阻止时间默认行为
*/
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
}
}
}
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Detaillierte Erläuterung der Verwendung von Return in der C-Sprache Detaillierte Erläuterung der Verwendung von Return in der C-Sprache Oct 07, 2023 am 10:58 AM

Detaillierte Erläuterung der Verwendung von Return in der C-Sprache

Wie ist die Ausführungsreihenfolge von Return- und Final-Anweisungen in Java? Wie ist die Ausführungsreihenfolge von Return- und Final-Anweisungen in Java? Apr 25, 2023 pm 07:55 PM

Wie ist die Ausführungsreihenfolge von Return- und Final-Anweisungen in Java?

Detaillierte Erläuterung der Rückgabewerte und Rückgabeanweisungen von JavaScript-Funktionen Detaillierte Erläuterung der Rückgabewerte und Rückgabeanweisungen von JavaScript-Funktionen Aug 04, 2022 am 09:46 AM

Detaillierte Erläuterung der Rückgabewerte und Rückgabeanweisungen von JavaScript-Funktionen

Wie verwendet Vue3 den Setup-Syntaxzucker, um das Schreiben von Return zu verweigern? Wie verwendet Vue3 den Setup-Syntaxzucker, um das Schreiben von Return zu verweigern? May 12, 2023 pm 06:34 PM

Wie verwendet Vue3 den Setup-Syntaxzucker, um das Schreiben von Return zu verweigern?

So verwenden Sie den Rückgabewert in Python So verwenden Sie den Rückgabewert in Python Oct 07, 2023 am 11:10 AM

So verwenden Sie den Rückgabewert in Python

Verwenden Sie das Schlüsselwort „return' in JavaScript Verwenden Sie das Schlüsselwort „return' in JavaScript Feb 18, 2024 pm 12:45 PM

Verwenden Sie das Schlüsselwort „return' in JavaScript

So verwenden Sie die Return-Anweisung in JavaScript So verwenden Sie die Return-Anweisung in JavaScript Feb 26, 2024 am 09:21 AM

So verwenden Sie die Return-Anweisung in JavaScript

Wird in Java nach der Ausführung der Return-Anweisung in einer Methode der Final-Block ausgeführt? Wird in Java nach der Ausführung der Return-Anweisung in einer Methode der Final-Block ausgeführt? Sep 17, 2023 pm 03:05 PM

Wird in Java nach der Ausführung der Return-Anweisung in einer Methode der Final-Block ausgeführt?

See all articles