preventDefault()函数用于阻止当前触发事件的默认行为

在HTML文档中,当我们触发某些DOM元素的特定事件时,可以执行该元素的默认行为。比如链接的click事件:当我们点击一个链接时,就会跳转到指定的URL。再比如:<form>表单元素的submit事件,当我们触发表单的提交事件时,就可以提交当前表单。

stopImmediatePropagation()函数用于阻止剩余的事件处理函数的执行,并防止当前事件在DOM树上冒泡

根据DOM事件流机制,在元素上触发的大多数事件都会冒泡传递到该元素的所有祖辈元素上,如果这些祖辈元素上也绑定了相应的事件处理函数,就会触发执行这些函数。

使用stopImmediatePropagation()函数可以阻止当前事件向祖辈元素的冒泡传递,也就是说该事件不会触发执行当前元素的任何祖辈元素的任何事件处理函数。

此外,与event.stopPropagation()函数相比,stopImmediatePropagation()函数还会阻止该元素剩余的其他事件处理函数的执行。

此外,由于live()函数并不是将事件处理函数直接绑定到自己身上,而是"委托"绑定到祖辈元素上,由祖辈元素来触发执行。live()函数会先一次性冒泡到文档的顶部,然后为符合条件的元素触发事件。因此,stopImmediatePropagation()函数无法阻止live事件的冒泡。

同样地,delegate()函数也是"委托事件函数",只有事件冒泡传递到"受委托"的祖辈元素才会被触发执行。因此,stopImmediatePropagation()函数无法阻止该元素到"受委托"的祖辈元素之间的事件冒泡。

stopPropagation()函数用于阻止当前事件在DOM树上冒泡

根据DOM事件流机制,在元素上触发的大多数事件都会冒泡传递到该元素的所有祖辈元素上,如果这些祖辈元素上也绑定了相应的事件处理函数,就会触发执行这些函数。

使用stopPropagation()函数可以阻止当前事件向祖辈元素的冒泡传递,也就是说该事件不会触发执行当前元素的任何祖辈元素的任何事件处理函数。

该函数只阻止事件向祖辈元素的传播,不会阻止该元素自身绑定的其他事件处理函数的函数。event.stopImmediatePropagation()不仅会阻止事件向祖辈元素的传播,还会阻止该元素绑定的其他(尚未执行的)事件处理函数的执行。

此外,由于live()函数并不是将事件处理函数直接绑定到自己身上,而是"委托"绑定到祖辈元素上,由祖辈元素来触发执行。live()函数会先一次性冒泡到文档的顶部,然后为符合条件的元素触发事件。因此,stopPropagation()函数无法阻止live事件的冒泡。

同样地,delegate()函数也是"委托事件函数",只有事件冒泡传递到"受委托"的祖辈元素才会被触发执行。因此,stopPropagation()函数无法阻止该元素到"受委托"的祖辈元素之间的事件冒泡。

原文地址:http://www.365mini.com/page/jquery-event-preventdefault.htm

jQuery preventDefault() ,stopPropagation(),stopImmediatePropagation()的更多相关文章

  1. How to correctly use preventDefault(), stopPropagation(), or return false; on events

    How to correctly use preventDefault(), stopPropagation(), or return false; on events I’m sure this h ...

  2. preventDefault stopPropagation??

    棒棒哒~ event.preventDefault https://developer.mozilla.org/zh-CN/docs/Web/API/Event/preventDefault stop ...

  3. jquery preventDefault()方法 语法

    jquery preventDefault()方法 语法 作用:preventDefault() 方法阻止元素发生默认的行为(例如,当点击提交按钮时阻止对表单的提交).大理石平台价格 语法:event ...

  4. perventDefault, stopPropagation, stopImmediatePropagation 三者的区别

    event有三种特别容易混淆的方法, 用来阻止默认事件的发生 1.  e.preventDefault(); 2. e.stopPropagation(); 3. e.stopImmediatePro ...

  5. jQuery Event.stopPropagation() 函数详解

    stopPropagation()函数用于阻止当前事件在DOM树上冒泡. 根据DOM事件流机制,在元素上触发的大多数事件都会冒泡传递到该元素的所有祖辈元素上,如果这些祖辈元素上也绑定了相应的事件处理函 ...

  6. preventDefault, stopPropagation, return false -JS事件处理中的坑

    我们以一个文件上传ui重设计为例子来探讨这几个函数的区别: 其中的html代码如下: <div class="file-upload"> <input type= ...

  7. stopPropagation / stopImmediatePropagation

      stopPropagation()只会阻止冒泡或者是捕获. stopImmediatePropagation()会阻止该元素的其他事件发生,但是stopPropagation就不会阻止其他事件的发 ...

  8. jquery preventDefault() 方法防止打开不是本站的链接URL

    将以下代码保存为test.html,用浏览器打开即可测试 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  9. jquery preventDefault()事件

    定义和用法 preventDefault() 方法阻止元素发生默认的行为(例如,当点击提交按钮时阻止对表单的提交). 语法 event.preventDefault() 参数 描述 event 必需. ...

随机推荐

  1. 记自己在mybatis中设置jdbcType的一个坑

    项目是用ssm搭建的.主要是为app数据接口.其中有一个需求就app想要查询一段时间内某个用户的测量信息,所以app给我后端传递了3个参数,分别是appuserId(String),startDate ...

  2. 模态框 modal data-toggle data-target

    模态框 modal data-toggle data-target   1. Data-*属性 模态框(modal) 触发事件(data-toggle) 触发对象data-target(ID 或类) ...

  3. MHA高可用及读写分离

    一.MHA简介 二.工作流程 三.MHA架构图 四.MHA工具介绍 五.基于GTID的主从复制 六.部署MHA 七.配置VIP漂移 八.配置binlog-server 九.MySQL中间件Atlas

  4. lombok标签之@Data @AllArgsConstructor @@NoArgsConstructor -如何去除get,set方法。@Data注解和如何使用,lombok

    在代码中我们可以只加上标签@Data 而不用get,set方法: val : 和 scala 中 val 同名, 可以在运行时确定类型; @NonNull : 注解在参数上, 如果该类参数为 null ...

  5. git放弃修改,强制覆盖本地代码

    $ git fetch --all $ git reset --hard origin/master $ git pull

  6. Java使用RabbitMQ之公平分发

    发送消息: package org.study.workfair; import com.rabbitmq.client.Channel; import com.rabbitmq.client.Con ...

  7. ABP 番外篇-菜单

    public class LearningMpaAbpNavigationProvider : NavigationProvider { public override void SetNavigat ...

  8. codeforces496C

    Removing Columns CodeForces - 496C You are given an n × m rectangular table consisting of lower case ...

  9. Jquery根据滚动条显示返回按钮

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

  10. Sql Server设置主键和外键

    设置主键 https://jingyan.baidu.com/article/9158e0003349a7a2541228fd.html 设置外键 https://jingyan.baidu.com/ ...