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. js判断数组是否包含某个字符串变量的实例

    最近碰到一个这样的现象,后台返回的数据中,数组里面有一些有变量值,有一些没有变量值. 举个例子,比如后台返回的例子是这样的: var arr=[ { "status":" ...

  2. 判断String类型字符串是否为空的方法

    在项目中经常遇到要判断String类型的字段是否为空操作 我们可以用Apache提供的StringUtils这个工具类,不用自己去判断,也不用自己封装判断空的方法 它有两个版本,一个是org.apac ...

  3. druid 连接Oracle时出现的错误

    转博主https://blog.csdn.net/jiangyu1013/article/details/70237550#commentsedit mysql 更新 SQL 语句 无错误 批量 报错 ...

  4. 4面向对象(OOP)

    学习线路 初学: 熟悉语法 进阶: 1.23种设计模式 2.6中开发原则 高级: 1.优化 2.架构 3.安全 概念 类:一类具有相同特性的事物的抽象描述,用一个java类表示. 成员变量:抽取的属性 ...

  5. Hibernate **关于hibernate4.3版本之后org.hibernate.service.ServiceRegistryBuilder被弃用**

    之前一直都是使用hibernate4.2.21的我,有一天突然没有使用本地的jar包而是让IDEA自动下载最新版本的hibernate5.2.2之后,发现有几个经常使用的方法报错了. //创建配置对象 ...

  6. linux按时间查询日志

    在系统应用集中部署的时候,很多日志因为太多难以定位,获取某段时间的日志是对运维人员非常关键的事情. 一.sed查看某时间段到现在的系统日志: sed  -n  '/May 20 17/,$p'   / ...

  7. RBS SharePoint 2010 Server.wmv

    视频地址: https://www.youtube.com/watch?v=DXi2er514iA&feature=youtu.be

  8. No compiler is provided in this environment. Perhaps you are running on a JRE rather than a JDK问题解决

    Maven构建项目报错: 解决办法: 1.eclipse菜单 -  Window - Preferences- Java - Installed JREs 将配置的JRE定位到JDK,例如JRE ho ...

  9. 前端nginx+Java后台ftp处理页面图片上传踩坑

    今天,将前端代码部署到服务器nginx上,在测试多图片上传时,报错413请求体空间太大,请求都没到后台,直接被nginx拦截,调整后又报错504. 整体而言,前端存在两处问题: 413 错误 :Req ...

  10. Vmware 给虚拟机传脚本并执行

    #_*_ coding:utf8 _*_ from pysphere import VIServer import ssl import re import sys import os import ...