preventDefault,stopPropagation,return false三者的区别

bladefury 发布于2019-08-20 19:05 / 2717人阅读

摘要：与之顺序相反的是事件捕获。可以理解为是的升级版，除了阻止冒泡，还能阻止结束掉当前对象未执行的其它绑定事件方法。作者以乐之名本文原创，有不当的地方欢迎指出。参考文章之间的区别

逛帖子的时候看到道友发的前端面试题，

preventDefault(), stopPropagation(), return false三者的区别

这三者的使用想必大家并不陌生，但是细想之下还是有可究之处。

preventDefault()

阻止元素在浏览器中的默认行为

网站
$("#link").click(function(event){
    event.preventDefault(); // 阻止了a链接href的访问或跳转
})

stopPropagation()

事件冒泡：当一个元素上的事件被触发时，比如鼠标点击了一个按钮，同样的事件将会在该按钮元素的所有父级／祖先元素上触发。这一个过程就被称为事件冒泡。它是由子级元素先触发，父级元素后触发，由内而外（由下往上）的一个流程。与之顺序相反的是事件捕获。

事件捕获：父级元素先触发，子级元素后触发，在此仅做了解。


  
    事件冒泡例子

$("#btn").click(function(event){ event.stopPropagation(); // 阻止了事件冒泡，不会触发"#inner, body"的点击事件 console.log("#btn") }) $("#inner").click(function(event){ // #btn 阻止了冒泡，这里不会执行 // 如果不使用stopPropagation, 当#btn点击时，这里也会执行 console.log("#inner") }) $("body").click(function(event){ // #btn 阻止了冒泡，.btn点击不会影响到我 // 如果不使用stopPropagation, 当#btn点击时，这里也会执行 console.log("body") }) // 使用了stopPropagation()输出 "#btn" // 不使用stopPropagation()输出 "#btn" "#inner" "body" stopImmediatePropagation()

阻止对象绑定的剩余的事件处理函数方法的执行，并阻止当前事件的冒泡。
可以理解为stopImmediatePropagation是stopPropagation的升级版，除了阻止冒泡，还能阻止结束掉当前对象未执行的其它绑定事件方法。

jQuery中一个对象可以绑定多个事件方法，执行顺序会按照绑定的先后顺序来执行


    
        stopImmediatePropagation()例子
        


$("body").click(function(event){
    // body 点击
    console.log("body");
});

$("#inner").click(function(event){
    // #inner 点击
    console.log("#inner");
})

$("#btn").click(function(event){
    // 第一个#btn点击
    e.stopImmediatePropagation();
    console.log("#btn 1");
})

$("#btn").click(function(event){
    // 第二个#btn点击
    console.log("#btn 2")
})

// 最终输出
"#btn 1" // (因为stopImmediatePropagation阻止了#btn绑定的剩余未执行的事件方法，并且阻止了冒泡)

// 如果不使用stopImmediatePropagation， 将输出
"#btn 1"
"#btn 2"
"#inner"
"body"
同个对象执行顺序按绑定顺序执行，冒泡则由内向外执行

return false

“return false” 相信不少同学会用来阻止元素在浏览器中的默认行为，
拿它当preventDefault()使用，但其实“return false”做的事情不仅仅只是阻止默认行为

当调用“return false”时，它执行了以下三件事情


event.preventDefault()

event.stopPropagation()

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

1，2点还好理解，那么第3点是怎么回事？
return语句会终止函数的执行并返回函数的值。所以不管是否返回false或是其它值，return语句后面的代码都不会执行。而返回false，使它具备了preventDefault和stropPropagation的功能

$("a").click(function(){
    return false; // return false直接返回了，并不会执行alert
    alert("我没有被弹出来");
})

// preventDefault 和 stopPropagation 并不会阻止回调函数的执行

总结

很多jQuery教程在代码演示中用“return false”来阻止执行浏览器的默认行为。
久而久之，很多同学习惯滥用“return false”来代替preventDefault

大多数情况下，我们仅仅是想要它执行跟preventDefault的功能而已，但它却自作主张地帮你执行了另外两步操作。
比较好的编程习惯是，需要用到该事件方法再去调用，否则应该避免冗余事件的执行。
就像prevnetDefault完成它该有的工作，并不会阻止父节点继续处理事件，使得代码更加灵活，更易于维护。

日常开发中还是要慎用“return false”，除非你同时需要preventDefault和stopPropagation，并且确定你的回调函数执行完成后调用，那么你可以使用“return false”，否则还是用preventDefault 或 stopPropagation 更好些。

作者：以乐之名
本文原创，有不当的地方欢迎指出。转载请指明出处。

参考文章：《preventDefault()、stopPropagation()、return false 之间的区别》

GPU云服务器云服务器 php的return javascript的return stopPropagation preventDefault

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85129.html

白话解释 Javascript事件preventDefault,stopPropagation及re

摘要：如图使用事件捕获模式注册事件监听对最外层，中间层，最内层分别用捕获模式注册事件监听，我们上面说了，如果使用捕获模式，那么第三个参数应该是，否则则是冒泡模式，如果不声明，默认为冒泡模式。来源: 个人博客想必好多童鞋都有直接复制粘贴event.preventDefault() 或者event.stopPropagation() 的经历，但是为什么这样做不甚了解，今天我们的目的就是要彻...

chanjarster 2019-08-21 15:09 评论0 收藏0
DOM中的各种区别小节

摘要：欢迎光临小弟博客我的博客原文中的各种区别小节参考普通添加事件和事件绑定的事件监听与捕获和冒泡和的区别相信大家在DOM的实际开发与学习过程中，肯定也遇到不少需要比较的东西，这里我主要列比较以下几点，更多的区别和总结，希望想到和遇到的朋友给我留言哦。 clientHeight/scrollHeight/offsetHeight defer vs async 事件模型-捕获/目标/冒泡...

Guakin_Huang 2019-08-22 10:56 评论0 收藏0
preventDefault()、stopPropagation()、return false 之间

摘要：取消默认操作，如标签的，时会触发，有时需要取消默认操作。停止冒泡，的事件流和的事件流类似。是顶层元素分发，底层元素，由顶层往上事件传递，叫冒泡。停止冒泡用等同于参考文章之间的区别 1. preventDefault 取消默认操作，如a标签的href，click时会触发，有时需要取消默认操作。 2. stopPropagation 停止冒泡，dom的事件流和android的事件流类似。a...

warmcheng 2019-08-20 19:03 评论0 收藏0
屏幕坐标、客户区域（可视窗口）坐标、页面坐标的区分

摘要：区分三类坐标屏幕坐标可视窗口坐标页面坐标有时不能迅速的对应起来，为了更好的区分三者，特意画了一张图如下屏幕坐标顾名思义，即整个电脑屏幕上任意一点的位置坐标，对应的属性分别为，范围如上图最外层红色边框范围，坐标为蓝色虚线对应的坐标。区分三类坐标屏幕坐标、可视窗口坐标、页面坐标有时不能迅速的对应起来，为了更好的区分三者，特意画了一张图如下： showImg(https://segme...

HmyBmny 2019-08-23 15:17 评论0 收藏0
JS高级程序设计笔记——事件（一）

摘要：但是通过添加的匿名函数无法移除，最好是在其他地方定义事件处理程序的函数，然后将该函数的名称传给第二个参数。一中的事件对象对象兼容级和级的浏览器将对象传入到事件处理程序中。一、事件流假设有如下HTML代码： Event Click me 其DOM树如下图所示：showImg(https://segmentfault.com/img/bVUUWA?w=50...

guqiu 2019-08-22 11:06 评论0 收藏0