return、reutrn false、e.preventDefault、e.stopPropagation、e.stopImmediatePropagation的区别

return

var i = function(){

return

}

console.log(i())//undefined

return的主要作用是阻止函数继续执行,直接返回undefined

return false

<a class="baidu" href="http://www.baidu.com">百度</a>

$(‘.baidu‘).on(‘click‘,function(e){

console.log(1)

return false

})//1

并未跳转页面,当每次调用return false时,实际做了3件事情

1.event.preventDefault();

2.event.stopPropagation();

3.停止回调函数执行并立即返回

e.preventDefault

$(‘.baidu‘).on(‘click‘,function(e){

console.log(1)

e.preventDefault()

})//1

e.preventDefault()方法用来阻止浏览器继续执行默认行为,这里阻止了页面的跳转

e.stopPropagation

<div class="btn"><a class="baidu" href="http://www.baidu.com">百度</a></div>

$(‘.btn‘).on(‘click‘, function () {

console.log(520)

})

$(‘.btn .baidu‘).on(‘click‘, function (e) {

console.log(1)

e.preventDefault()

e.stopPropagation()

})

输出结果为1

e.stopPropagation阻止事件冒泡

e.stopImmediatePropagation

$(‘.btn .baidu‘).on(‘click‘,function(e){

console.log(1)

e.preventDefault()

})

$(‘.btn .baidu‘).on(‘click‘,function(e){

console.log(2)

e.preventDefault()

e.stopImmediatePropagation()

})

$(‘.btn .baidu‘).on(‘click‘,function(e){

e.preventDefault()

console.log(3)

})

$(‘.btn‘).on(‘click‘,function(e){

e.preventDefault()

console.log(4)

})

点击输出结果为1,2

e.stopImmediatePropagation()会停止一个事件继续执行,即使当前的对象上还绑定了其他处理函数,所有绑定在一个对象上的事件会按照绑定顺序执行

综上所述

return阻止函数继续执行,返回undefined

return false有三个作用,阻止浏览器默认行为,阻止事件冒泡,停止回调函数执行并立即返回

event.preventDefault阻止浏览器默认行为

event.stopPropagation阻止事件冒泡

event.stopImmediatePropagation停止一个事件继续执行,即使当前的对象上还绑定了其他处理函数,所有绑定在一个对象上的事件会按照绑定顺序执行

原文地址:https://www.cnblogs.com/ranyonsue/p/10869819.html

时间: 2024-10-18 05:28:55

return、reutrn false、e.preventDefault、e.stopPropagation、e.stopImmediatePropagation的区别的相关文章

jQuery中return false,e.preventDefault(),e.stopPropagation()的区别

e.stopPropagation()阻止事件冒泡 <head> <title></title> <script src="http://cordial99.blog.163.com/blog/Scripts/jquery-1.4.1.js" type="text/javascript"></script> </head> <body> <table> <tr>

jQuery js 中return false,e.preventDefault(),e.stopPropagation()的区别(事件冒泡)

有时候遇到冒泡事件很烦人,真的..... 1.e.stopPropagation()阻止事件冒泡 <head> <title></title> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> </head> <body> <table> <tr> <td>

preventDefault()、stopPropagation()、return false 之间的区别

"return false"之所以被误用的如此厉害,是因为它看起来像是完成了我们交给它的工作,浏览器不会再将我们重定向到href中的链接,表单也不会被继续提交,但这么做到底有什么不对呢? 可能在你刚开始学习关于jQuery事件处理时,看到的第一个例子就是关于如何阻止浏览器执行默认行为,比如下面这段演示click事件的代码 $("a.toggle").click(function () { $("#mydiv").toggle(); return

js中的preventDefault与stopPropagation详解

本篇文章主要是对js中的preventDefault与stopPropagation进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助. 首先讲解一下js中preventDefault和stopPropagation两个方法的区别:preventDefault方法的起什么作用呢?我们知道比如<a href="http://www.baidu.com">百度</a>,这是html中最基础的东西,起的作用就是点击百度链接到http://www.baidu.co

javascript中的preventDefault与stopPropagation作用介绍

preventDefault方法的起什么作用呢? 我们知道比如<a href="http://www.baidu.com">百度</a>,这是html中最基础的东西,起的作用就是点击百度链接到http://www.baidu.com,这是属于<a>标签的默认行为. 看一段代码大家就明白了: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">

深入了解preventDefault与stopPropagation

event.preventDefault()用法介绍(阻止默认事件) 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作).例如,如果 type 属性是 "submit",在事件传播的任意阶段可以调用任意的事件句柄,通过调用该方法,可以阻止提交表单.注意,如果 Event 对象的 cancelable 属性是 fasle,那么就没有默认动作,或者不能阻止默认动作.无论哪种情况,调用该方法都没有作用. 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如

event.preventDefault() --- event.stopPropagation()

1.event.preventDefault()   阻止默认行为 <a href="http://www.baidu.com">链接</a> // 阻止默认行为 e.preventDefault(); $("a").click(function(){ event.preventDefault(); }) //阻止浏览器的默认行为 function stopDefault( e ) { //阻止默认浏览器动作(W3C) if ( e &

js 阻止事件冒泡和默认行为 preventDefault、stopPropagation、return false

preventDefault: preventDefault它是事件对象(Event)的一个方法,作用是取消一个目标元素的默认行为.既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就没有默认行为,调用当然就无效了.什么元素有默认行为呢?如链接<a>,提交按钮<input type=”submit”>等.当Event对象的cancelable为false时,表示没有默认行为,这时即使有默认行为,调用 preventDefault也是不会起作用的. 我们都知道,链接&

浅谈 return false 和preventDefault stopPropagation stopImmediatePropagation 的正确用法

1.使用return false实际上做了3件事:(谨慎使用) event.preventDefault(); event.Propagation(); 停止回掉函数执行并立即返回 2.event.preventDefault()  ----->阻止浏览器继续执行默认行为 3.event.stopPropagation() ----->停止事件冒泡 event bubbling 4. stopImmediatePropagation ------>停止一个事件继续执行 link:http