html 冒泡事件拦截,Js 冒泡事件阻止

一. 事件目标

现在,事件处理程序中的变量event保存着事件对象。而 event.target 属性保存着产生事件的目标元素。这个属性是 DOM API 中规定的,但是没有被所有浏览器实现 。jQuery对这个事件对象进行了必要的扩大,从而在任何浏览器中都能够使用这个属性。通过.target,可以肯定DOM中首先接收到事件的元素(即实际被单击的元素)。而且,我们知道this援用的是处理事件的DOM元素,所以可以编写以下代码:

$(document).ready(function(){

$('#switcher').click(function(event){

$('#switcher .button').toggleClass('hidden');

})

})

$(document).ready(function(){

$('#switcher').click(function(event){

if(event.target==this){

$('#switcher .button').toggleClass('hidden');

}

})

})

此时的代码确保了被单击的元素是

,而不是其他后代元素。现在,单击按钮不会再折叠样式转换器,而单击边框则会触发折叠操作。但是,单击标签一样甚么也不会产生,由于它也是一个后代元素。实际上,我们可以不把检查代码放在这里,而是通过修改按钮的行动来到达目标 。

二. 停止事件传播

事件对象还提供了一个 .stopPropagation() 方法,该方法可以完全禁止事件冒泡。与 .target 类似,这个方法也是一种纯 JavaScript 特性,但在跨浏览器的环境中则没法安全地使用 。不过,只要我们通过jQuery来注册所有的事件处理程序,就能够放心肠使用这个方法。

下面,我们会删除刚才添加的检查语句 event.target == this,并在按钮的单击处理程序中添加一些代码:

$(document).ready(function(){

$('#switcher .button').click(funtion(event){

//……

event.stopPropagation();

})

})

同之前一样,需要为用作单击处理程序的函数添加一个参数,以便访问事件对象。然后,通过简单地调用 event.stopPropagation() 就能够避免其他所有 DOM 元素响应这个事件。这样一来,单击按钮的事件会被按钮处理,而且只会被按钮处理。单击样式转换器的其他地方则可以折叠和扩大全部区域。

三. 默许操作

如果我们把单击事件处理程序注册到一个锚元素,而不是一个外层的

上,那末就要面对另外一个问题:当用户单击链接时,浏览器会加载一个新页面。这类行动与我们讨论的事件处理程序不是同一个概念,它是单击锚元素的默许操作。类似地,当用户在编辑完表单后按下回车键时,会触发表单的 submit 事件,在此事件产生后,表单提交才会真正产生。

如果我们不希望履行这类默许操作,那末在事件对象上调用 .stopPropagation() 方法也杯水车薪,由于默许操作不是在正常的事件传播流中产生的。在这类情况下,.preventDefault() 方法则可以在触发默许操作之前终止事件 。

提示 当在事件的环境中完成了某些验证以后,通常会用到 .preventDefault()。例如,在表单提交期间,我们会对用户是不是填写了必填字段进行检查,如果用户没有填写相应字段,那末就需要禁止默许操作。我们将在第8章详细讨论表单验证。

事件传播和默许操作是相互独立的两套机制,在两者任何一方产生时,都可以终止另外一方。如果想要同时停止事件传播和默许操作,可以在事件处理程序中返回 false,这是对在事件对象上同时调用 .stopPropagation() 和 .preventDefault() 的一种简写方式。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/557036.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Springboot的异步、定时、邮件任务

一、异步任务 ​ 1、编写一个类AsyncService ​ 异步处理还是非常常用的,比如我们在网站上发送邮件,后台会去发送邮件,此时前台会造成响应不动,直到邮件发送完毕,响应才会成功,所以我们一般会采用多线程的…

raml2html 安装,Raml实践

Raml实践简介:RAML的全称是RESTful API Modeling Language,这是一种用来描述基于Restful架构的API(设计API)的语言。它的语法规范是基于YAML的新规范,因此机器与人类都能够轻易地理解其中的内容。一、工具安装一、API Workbench(客户端工具-推…

Spring框架中的单例Bean是线程安全的吗?

首先直接给出答案:不是线程安全的 一、分析问题 证明不是线程安全的案例如下: public class Student {private String stuName;public String report(String uname){stuName "大家好,我叫:"uname;try {Thread.sleep…

三诺+n20g+微型计算机,原来是他?揭秘三诺永恒系列开山鼻祖

提起三诺,我们的脑海中常常会浮现出几个关键词,“高性价比”、 “独立功放”、“摩机大赛”等等,摩机大赛让我们对三诺永恒系列2.0音箱有了全新的认识,凭借出色的音质表现,永恒系列广受专业编辑和用户的好评&#xff0…

Spring 中的bean 是线程安全的吗?

结论:不是线程安全的 Spring容器中的Bean是否线程安全,容器本身并没有提供Bean的线程安全策略,因此可以说Spring容器中的Bean本身不具备线程安全的特性,但是具体还是要结合具体scope的Bean去研究。 Spring 的 bean 作用域&#…

天文学专业在什么时候学计算机,南京大学在985排名第几?南京大学最牛的专业是天文系吗?...

选择科目测一测我能上哪些大学选择科目领取你的专属报告>选择省份关闭请选择科目确定v>百年名校南京大学坐落于金陵古都,文化底蕴深厚,是不少考生向往的“211”“985”“双一流”高校。本期圆梦志愿就来带大家看看这所学校在全国985高校中的排名情…

Java中的ThreadLocal详解

一、ThreadLocal简介 多线程访问同一个共享变量的时候容易出现并发问题,特别是多个线程对一个变量进行写入的时候,为了保证线程安全,一般使用者在访问共享变量的时候需要进行额外的同步措施才能保证线程安全性。ThreadLocal是除了加锁这种同…

计算机专用英语词汇pdf,计算机专用英语词汇1500词.pdf

计算机专用英语词汇1500 词 36. memory n. 记忆存储,存储器37. which pron. 哪个,a. 那一个Sample TextSample Text 38. all a. 全,全部;ad. 完全电脑日常用语和术语大集合~~ !!! 39. on ad. 接…

谈谈对ThreadLocal的理解?(基于jdk1.8)

在java的多线程模块中,ThreadLocal是经常被提问到的一个知识点,提问的方式有很多种,可能是循序渐进也可能是就像我的题目那样,因此只有理解透彻了,不管怎么问,都能游刃有余。 这篇文章主要从以下几个角度来…

江苏学考计算机,学长建议 江苏考生 位次在4000-10000 想报考计算机的同学

本人对高考志愿填报有点执念,毕竟是第一次真正重大的抉择,以后每年都会看看高校录取情况,加上今年刚找工作,对互联网企业的选人标准比较了解,所以斗胆来提提建议。核心观点,多看看985的分校区,比…

mybatis if test判断 list不为空

<if test"list!null and list.size()!0"></if>注意 如果使用list.isNotEmpty()会报错&#xff0c;提示不是一个方法

数字时钟html5 js,html5 canvas js(数字时钟)实例代码

canvas dClock您的浏览器太古董了&#xff0c;升级吧&#xff01;var clock document.getElementById("clock");var cxt clock.getContext("2d");//显示数字时钟function showTime(m, n) {cxt.clearRect(0, 0, 500, 500);var now new Date;var hour no…

简单理解BigDecimal.valueof(Double t)与BigDecimal.valueof(String t)的区别——BigDecimal

上面的代码主要的区别在于 初始化BigDecimal时形参是double、String和float的区别 从上面可以看到&#xff0c;当double 和 float 时&#xff0c;实际保存的值并不是是准确的0.99&#xff0c;这是为什么呢 大致的原因是&#xff1a; BigDecimal(double val)将会把double型二…

在线计算机标准版,NCRE全国计算机等级一标准版级考试复习资料.doc

全国计算机等级一级考试复习资料内容&#xff1a;计算机基础知识、文字处理软件WORD复习题类型&#xff1a;填空题、选择题、综合题复习题数量&#xff1a;复习时间&#xff1a;12月5日—12月9日考试时间&#xff1a;12月9日(周三下午第三节课)参考对象&#xff1a;电子高专的学…

mysql 统计当天,本周,本月,上一月的数据

今天 select * from ht_invoice_information where year(create_date)year(date_sub(now(),interval 1 year)); select * from 表名 where to_days(时间字段名) to_days(now());昨天 select * from 表名 where to_days( now( ) ) - to_days( 时间字段名) < 1近期7天 sel…

下图中的蓝月亮为科学家用计算机,2018年高一地理前半期课时练习试卷带答案和解析...

目前人类可以观察到的最高级别天体系统是A. 总星系 B. 银河系 C. 太阳系 D. 地月系【答案】A【解析】本题考查天体系统的层次。距离相近的天体因相互吸引和相互绕转&#xff0c;构成不同级别的天体系统&#xff0c;天体系统的层次为&#xff1a;最高一级为总星系(即目前所知的宇…

邮政计算机网络,邮政计算机网络论文(共2018字).doc

邮政计算机网络论文(共2018字)邮政计算机网络论文(共2018字)一、邮政计算机网络基本现状分析邮政网络系统资源不足&#xff0c;数据传输技术滞后随着邮政储蓄代收付业务和电子邮政业务的快速发展&#xff0c;市场需要变化加快&#xff0c;现有网络系统资源不足&#xff0c;设备…

HashMap的put方法返回值问题

API文档中的描述&#xff1a; 先看一个例子 Map<Character, Integer> map new HashMap<Character, Integer>(); System.out.println(map.put(a, 0)); // null System.out.println(map.put(a, 1)); // 0 System.out.println(map.put(a, 2)); // 1 System.out.pri…

资金时间价值的计算机应用视频讲解,第八章资金时间价值与方案经济比选20161018讲解.ppt...

第八章资金时间价值与方案经济比选20161018讲解(二)净年值(NAV) 1、含义 净年值也称净年金(记作NAV)&#xff0c;它是把项目寿命期内的净现金流量按设定的折现率折算成与其等值的各年年末的等额净现金流量值。 2&#xff0e;计算 先求该项目的净现值&#xff0c;然后乘以资金回…

[Microsoft][ODBC SQL Server Driver][SQL Server]对象名 ‘***‘无效问题的解决方案器

[Microsoft][ODBC SQL Server Driver][SQL Server]对象名 ***无效问题的解决方案 在用Java进行SQL server数据编程时出现数据库连接成功后对表进行操作时报错“表名无效”。在网上搜了相关问题后均未解决&#xff0c;最后通过在表名前加数据库名的方式得以解决&#xff0c;记录…