search
HomeWeb Front-endJS TutorialThe difference between return false; and e.preventDefault();_javascript skills

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:
The difference between return false; and e.preventDefault();_javascript skills
演示地址: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.


参考:

1.The difference between ‘return false;' and ‘e.preventDefault();'
2.Event order

测试代码打包下载

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
C语言return的用法详解C语言return的用法详解Oct 07, 2023 am 10:58 AM

C语言return的用法有:1、对于返回值类型为void的函数,可以使用return语句来提前结束函数的执行;2、对于返回值类型不为void的函数,return语句的作用是将函数的执行结果返回给调用者;3、提前结束函数的执行,在函数内部,我们可以使用return语句来提前结束函数的执行,即使函数并没有返回值。

Java中return和finally语句的执行顺序是怎样的?Java中return和finally语句的执行顺序是怎样的?Apr 25, 2023 pm 07:55 PM

源码:publicclassReturnFinallyDemo{publicstaticvoidmain(String[]args){System.out.println(case1());}publicstaticintcase1(){intx;try{x=1;returnx;}finally{x=3;}}}#输出上述代码的输出可以简单地得出结论:return在finally之前执行,我们来看下字节码层面上发生了什么事情。下面截取case1方法的部分字节码,并且对照源码,将每个指令的含义注释在

Vue3怎么使用setup语法糖拒绝写returnVue3怎么使用setup语法糖拒绝写returnMay 12, 2023 pm 06:34 PM

Vue3.2setup语法糖是在单文件组件(SFC)中使用组合式API的编译时语法糖解决Vue3.0中setup需要繁琐将声明的变量、函数以及import引入的内容通过return向外暴露,才能在使用的问题1.在使用中无需return声明的变量、函数以及import引入的内容,即可在使用语法糖//import引入的内容import{getToday}from'./utils'//变量constmsg='Hello!'//函数func

详解JavaScript函数返回值和return语句详解JavaScript函数返回值和return语句Aug 04, 2022 am 09:46 AM

JavaScript 函数提供两个接口实现与外界的交互,其中参数作为入口,接收外界信息;返回值作为出口,把运算结果反馈给外界。下面本篇文章带大家了解一下JavaScript函数返回值,浅析下return语句的用法,希望对大家有所帮助!

Python返回值return怎么用Python返回值return怎么用Oct 07, 2023 am 11:10 AM

Python返回值return用法是当函数执行到return语句时,将立即停止执行,并将指定的值返回给调用函数的地方。详细用法:1、返回单个值;2、返回多个值;3、返回空值;4、提前结束函数的执行。

使用JavaScript中return关键字使用JavaScript中return关键字Feb 18, 2024 pm 12:45 PM

JavaScript中return的用法,需要具体代码示例在JavaScript中,return语句用于指定从函数中返回的值。它不仅可以用于结束函数的执行,还可以将一个值返回给调用函数的地方。return语句有以下几个常见的用法:返回一个值return语句可以用来返回一个值给调用函数的地方。下面是一个简单的示例:functionadd(a,b){

JavaScript中如何使用return语句JavaScript中如何使用return语句Feb 26, 2024 am 09:21 AM

JavaScript中return的使用方法,需要具体代码示例在JavaScript中,return是一个非常重要的关键字,它通常用于函数中返回值或结束函数的执行。return语句用于将值返回给函数的调用者,并终止函数的执行。return语句可以在函数的任何位置使用,并且可以返回任何JavaScript数据类型,包括数字、字符串、布尔值、

在Java中,一个方法中的return语句执行后,finally块会被执行吗?在Java中,一个方法中的return语句执行后,finally块会被执行吗?Sep 17, 2023 pm 03:05 PM

是的,即使在方法中的return语句之后,finally块也会被执行。Java中无论是否发生异常,finally块都会执行。如果我们在finally块中显式调用System.exit()方法,那么只有它不会被执行。很少有情况不会执行finally,例如JVM崩溃、电源故障、软件崩溃等。除了这些情况外,finally块将始终被执行。示例publicclassFinallyBlockAfterReturnTest{  publicstaticvoidmain(St

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)