html 冒泡事件拦截,JavaScript阻止事件冒泡与事件捕获
1、事件冒泡
在一个对象上触发某类事件,如onclick事件等,在其祖先节点上也会依次触发该事件。
事件冒泡
依次输出:a、div、body
注意:不是所有的事件都能冒泡。blur、focus、load、unload等事件不冒泡。
2、阻止事件冒泡
若只希望事件发生在该子元素而不是在它的祖先元素上,则需要阻止事件冒泡。
IE浏览器和其他浏览器阻止事件冒泡的方式不同:
兼容说明:
function stopBubble(e){
if(e && e.stopPropagation)
e.stopPropagation(); // 非IE浏览器
else
window.event.cancelBubble = true; // IE浏览器
}
html:
事件冒泡
JS
function stopBubble(e){
if(e && e.stopPropagation)
e.stopPropagation(); // 非IE浏览器
else
window.event.cancelBubble = true; // IE浏览器
}
document.getElementsByTagName("body")[0].onclick = function(e) {
stopBubble(e);
alert('body');
}
document.getElementsByTagName("div")[0].onclick = function(e) {
stopBubble(e);
alert('div');
}
document.getElementsByTagName("a")[0].onclick = function(e) {
stopBubble(e);
alert('a');
}
输出:a
3、事件冒泡与事件捕获
事件捕获:事件从document开始往下查找,直到捕获到事件目标(target)。
事件冒泡:事件从事件目标(target)开始,往上冒泡直到document为止。
传统的element.onclick = doSomething这样的事件绑定,一般采用的是事件冒泡形式。
html:
传统的事件冒泡
js:
document.getElementsByTagName("p")[0].onclick = function(e){
alert('p');
};
document.getElementsByTagName("div")[0].onclick = function(e){
alert('div');
};
依次输出:p、div
其实,可以选择绑定事件时采用事件捕获还是事件冒泡,方法是绑定事件时通过addEventListener函数,它有3个参数,第3个参数若是true,则表示采用事件捕获,若是false,则表示采用事件冒泡,如element.addEventListener('click', doSomething, true)。
html:
设置的事件冒泡
js:
document.getElementsByTagName("p")[0].addEventListener('click', function(e){
alert('p');
}, false);
document.getElementsByTagName("div")[0].addEventListener('click', function(e){
alert('div');
}, false);
依次输出:p、div
html:
设置的事件捕获
document.getElementsByTagName("p")[0].addEventListener('click', function(e){
alert('p');
}, true);
document.getElementsByTagName("div")[0].addEventListener('click', function(e){
alert('div');
}, true);
依次输出:div、p
注意:Chrome和Firefox都支持事件捕获和事件冒泡,但IE只支持事件冒泡,不支持事件捕获,也不支持addEventListener函数,提供了另一个函数attachEvent,如ele.attachEvent("onclick", doSomething)。
html 冒泡事件拦截,JavaScript阻止事件冒泡与事件捕获相关推荐
- Javascript:阻止浏览器默认右键事件,并显示定制内容
在逛一些知名图片社区的时候,遇到自己心怡的图片,想要右键另存的时候,默认的浏览器菜单不见了,却出现了如:[©kevin版权所有]之类的信息: 今天在看Javascript事件默认行为相关的知识,所以, ...
- javascript系列之DOM(三)---事件
javascript系列之DOM(三)---事件 原文:javascript系列之DOM(三)---事件 事件是javascript跳动的心脏,是DOM所有成分结合的万金油.当我们在WEB 上进行某些 ...
- android 拦截点击事件,Android事件拦截机制
一直对事件拦截不是很清楚,读Android群英传的笔记,记录下. 要了解事件拦截,首先要了解触摸事件,触摸事件是捕获触摸屏幕后发生的事件.按一下屏幕通常会有几个事件发生,当按下屏幕,这是事件1.滑动了 ...
- html禁止页面左右滑动,js阻止移动端默认事件以及只阻止横向滚动事件方法
js阻止移动端默认事件,是在相关的touch事件的时候利用event.preventDefault();来阻止默认滚动行为,但是如果要实现阻止横向滚动行为而不阻止竖向滚动行为就要写一个方法通过手指滑动 ...
- 反思|Android 事件拦截机制的设计与实现,android组件化开发
最顶层View直接持有最下层某个View的引用合理吗?答案是否定的.首先,这导致View层级依赖之间的混乱:其次,顶层View本身持有了最下层某个View的引用,则这之间若干个层级的View的targ ...
- JavaScript阻止冒泡和取消默认事件(默认行为)
JavaScript冒泡和捕获是事件的两种行为,使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播.使用event.preventDefault()可以取消 ...
- javascript 阻止事件冒泡 cancelBubble
javascript简单的阻止事件冒泡,可以使用事件的cancelBubble方法为true: html部分 <button id="btn1">点击显示div< ...
- html 冒泡事件拦截,Js 冒泡事件阻止
一. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而 event.target 属性保存着产生事件的目标元素.这个属性是 DOM API 中规定的,但是没有被所有浏览器实现 .jQu ...
- jQuery之防止【冒泡事件】,阻止默认行为 【return false】 event.stopPropagation event.preventDefault...
知识点: event.stopPropagation() 阻止冒泡 event.preventDefault() 阻止默认事件,比如button提交后跳转到链接页面 两者都可以用 return ...
最新文章
- 一周一论文(翻译)——[VLDB 19] Minimizing Cost by Reducing Scaling Operators in Distributed Stream Processing
- MyEclipse使用总结——MyEclipse文件查找技巧 ctrl+shift+R ctrl+H
- 滤波电容的选择(调试中)
- python访问共享文件夹_python – 通过linux机器打开Windows共享文件夹
- sql批量插入防止重复插入_使用具有严格业务规则SQL批量插入
- 如何在《救赎之路》中使用CPU粒子效果
- IDEA轻松实现.class文件反编译(超实用)
- matlab数学实验课件5,matlab_intro_西安交通大学-数学实验教案_ppt_大学课件预览_高等教育资讯网...
- 小黑盒不显示服务器,小黑盒有的好友不显示 | 手游网游页游攻略大全
- STM32单片机跑马灯实验解析
- 区块链共识机制 和 经典分布式共识机制
- 文字检测与识别1-MSER
- PAT1009 说反话 (20分)
- 光盘驱动计算机无法识别,win7系统读不出光盘怎么办 win7电脑光盘不能被识别的解决方法...
- 计算机系统字体安装程序,windows系统字体安装方法:使用字体安装软件-windows技巧-电脑技巧收藏家...
- 5G时代来袭,智能视频监控在智慧城市建设中的新发展与新应用
- Gluon新机器学习库,学习库中的富二代丨又拖了后腿,9亿4G用户平均月流量2007M【软件网每日新闻播报│第10-23期】
- Eclipse/MyEclipse 添加src JAVA DOC XML提示
- 多条语音消息合成一整条连续播放与进度条功能技术点!
- 高仿APP——元贝驾考(三)滑动关闭Activity