preventDefault, stopPropagation, stopImmediateProp

TesterHome 发布于2019-08-22 16:00 / 2983人阅读

摘要：同样是使用上面的示例，但这次我们给添加个，一个是被所有共享的，另一个是独有的，假设这两个对当前网站的功能很重要。登场他可以阻止事件冒泡并且阻止相同事件的其他侦听器被调用。

event事件对象有三种易混淆的方法，本文讲述他们之间的区别：

Event.preventDefault()

Event.stopPropagation()

Event.stopImmediatePropagation()

综述

首先，我们看看他们在MDN上的介绍：

preventDefault: 如果当前event.cancelable属性为true，则取消的当前事件的默认动作，但不阻止当前事件的进一步传播

stopPropagation: 阻止当前冒泡或捕获阶段的进一步传播

stopImmediatePropagation: 阻止调用相同事件的其他监听器

Event.preventDefault

我们来看一个代码示例，当点击一个form中的submit按钮时会将form提交处理，此时如果使用Event.preventDefault，就可以在点击submit按钮时避免表格提交。

$("#myForm").on("submit", function(e) {
    e.preventDefault(); // 什么都不会发生
});

Event.preventDefault能确保表格不会被提交，但他不能阻止来自冒泡阶段的submit或点击事件，其他两种方法就是解决这个问题的。

Event.stopPropagation

stopPropagation 保证当前事件不再进一步冒泡，通过以下代码示例说明：


    点击我!

$(".container").on("click", function(e) {
    console.log("container 被点击了");
});

$(".element").on("click", function(e) {
    e.preventDefault(); // 此时链接不会跳转
    console.log("element 被点击了");
});

此时点击链接，console会显示：

"element 被点击了"
"container 被点击了"

这时如果添加Event.stopPropagation:

$(".container").on("click", function(e) {
    console.log("container 被点击了");
});

$(".element").on("click", function(e) {
    e.preventDefault(); // 此时链接不会跳转
    e.stopPropagation(); // 此时事件冒泡被阻止
    console.log("element 被点击了");
});

再次点击链接，会看到：

"element 被点击了"

Event.stopImmediatePropagation

以上两种方法已经可以解决我们在事件处理中90%的问题，接下来介绍一种无法解决情形。
同样是使用上面的示例，但这次我们给添加2个class，一个是被所有共享的class: item，另一个是独有的class: element，假设这两个class对当前网站的功能很重要。


    Click Me!

我们首先使用之前提到的Event.stopPropagation

$(".element").on("click", function(e) {
    e.preventDefault(); // 此时链接不会跳转
    e.stopPropagation(); // 此时事件冒泡被阻止
    console.log("element 被点击了");
});

$(".item").on("click", function(e) {
    console.log("item 被点击了");
});

当我们点击时，将会显示：

"item 被点击了"
"element 被点击了"

这个现象会发生是因为item与element在DOM中是被平等对待的，与之前被点击然后冒泡到父级div不同，这次我们点击同时触发了item与element的事件，此时使用stopPropagation无法阻止这种事件。

stopImmediatePropagation登场~
他可以阻止事件冒泡并且阻止相同事件的其他侦听器被调用。

$(".element").on("click", function(e) {
    e.preventDefault(); // 此时链接不会跳转
    e.stopImmediatePropagation(); // item的点击事件将被阻止
    console.log("element 被点击了");
});

$(".item").on("click", function(e) {
    console.log("item 被点击了");
});

这里我们要注意的一点是：stopImmediatePropagation的代码要尽量放到其他同级竞争事件代码的上面，如上面的例子中，为了使stopImmediatePropagation起作用，我们将element的事件监听代码放到了item之前！

运行最后一例中的代码，将只会看到：

"element 被点击了"

专线服务混合云 stopPropagation preventDefault

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

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

preventDefault,stopPropagation,return false三者的区别

摘要：与之顺序相反的是事件捕获。可以理解为是的升级版，除了阻止冒泡，还能阻止结束掉当前对象未执行的其它绑定事件方法。作者以乐之名本文原创，有不当的地方欢迎指出。参考文章之间的区别逛帖子的时候看到道友发的前端面试题， preventDefault(), stopPropagation(), return false三者的区别这三者的使用想必大家并不陌生，但是细想之下还是有可究之处。 pre...

bladefury 2019-08-20 19:05 评论0 收藏0
白话解释 Javascript事件preventDefault,stopPropagation及re

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

chanjarster 2019-08-21 15:09 评论0 收藏0
preventDefault()、stopPropagation()、return false 之间

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

warmcheng 2019-08-20 19:03 评论0 收藏0
JavaScript 设计模式读书笔记(六)——门面模式

摘要：简单的门面模式实例事件绑定函数门面模式的作用是将复杂的接口进行包装，变成一个便于使用的接口。还是以事件相关为例，事件绑定中还有两个常用的分别是和。门面模式是什么，与其我去用笨拙的语言去解释，不如看下面这张图，曾经在网上很火的一张图片，说的是一位儿子为他的爸妈设置的电脑桌面。 showImg(http://segmentfault.com/img/bVcgHm); 有了这些起好名字...

pubdreamcc 2019-08-19 14:44 评论0 收藏0
js控制文件拖拽，获取拖拽内容。

摘要：在用户拖拽文件到浏览器的某个元素上时，可以监听到与拖拽相关的事件，并对拖拽结果进行处理，本文讨论下和拖拽文件相关的一些问题，不过没有处理太多关于兼容性的问题。其中，与拖拽文件相关的事件有文件拖拽进文件拖拽在悬浮文件拖拽离开文件拖拽放下。在用户拖拽文件到浏览器的某个元素上时，js可以监听到与拖拽相关的事件，并对拖拽结果进行处理，本文讨论下和拖拽文件相关的一些问题，不过没有处理太多关于兼...

李世赞 2019-08-26 11:45 评论0 收藏0