js阻止事件冒泡的两种方法
2023-09-11 14:21:35 时间
1、什么是JS事件冒泡
在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。
2、阻止方法
方法一:event.stopPropagation( )
<div> <p>段落文本内容 <input type="button" value="点击" /> </p> </div>
// 为所有div元素绑定click事件 $("div").click( function(event){ alert("div-click"); } ); //为所有p元素绑定click事件 $("p").click( function(event){ alert("p-click"); } ); //为所有button元素绑定click事件 $(":button").click( function(event){ alert("button-click"); // 阻止事件冒泡到DOM树上 event.stopPropagation(); // 只执行button的click,如果注释掉该行,将执行button、p和div的click (同类型的事件) } );
方法二:event.target
现在,事件处理程序中的变量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'); } }) })
此时的代码确保了被单击的元素是<div id="switcher"> ,而不是其他后代元素。现在,单击按钮不会再折叠样式转换器,而单击边框则会触发折叠操作。但是,单击标签同样什么也不会发生,因为它也是一个后代元素。实际上,我们可以不把检查代码放在这里,而是通过修改按钮的行为来达到目标 。
相关文章
- JS框架_(JQuery.js)点赞按钮动画
- 【nodejs原理&源码赏析(7)】【译】Node.js中的事件循环,定时器和process.nextTick
- Node.js自定义对象事件监听与发射
- js去除空格
- JS魔法堂:追忆那些原始的选择器
- baguetteBox.js响应式画廊插件(纯JS)
- 解决JS(Vue)input[type='file'] change事件无法上传相同文件的问题
- 在JavaScript中使用json.js:Ajax项目之GET请求(同步)
- vue.js 3.2.22:自动旋转的音乐播放按钮
- node.js版本管理for window ---- nvmw
- [JS Pattern] Proxy pattern
- 吗咿呀嘿-用js来搞个简单的人脸识别
- 前后端交互模式大总结 艾提拉 总结 attilax总结 目录 1. 通过ajax ajax就是js的网络api 完全解耦合 推荐1 1.1. Query Ajax 操作函数1 1.2. 服务
- Atitit 研发体系 codelib 代码库的建设 目录 1. 概念与组成2 1.1. Java代码2 1.2. Js代码2 1.3. H5 代码 js+css+htm+txt2 1.4.
- Atitit.js的键盘按键事件捆绑and事件调度
- js jquery手指滑动,上滑,下滑,左滑,右滑,事件监听
- video.js 视频播放出错显示图片
- js实现页面滑动到最底部触发内容加载
- JS:crypto-js模块实现数据加密解密
- 禁止选中文本JS
- JS中的prototype
- 【JS高级】js面向对象三大特性之封装—如何创建对象_05
- 【JS高级】js之函数、重载、匿名函数、作用域及作用域链_03