javascript阻止事件冒泡的方法
有的时候我们需要实现这样的功能:
点击某个蒙版,该蒙版消失,但是如果点击蒙版上的某个元素,希望蒙版不消失,这就需要用到阻止事件的冒泡了
html:
<div id="outer">
<div class="inner">
</div>
</div>
css:
#outer{
width:100px;
height:100px;
background:darkgrey;
}
#outer>.inner{
width:50px;
height:50px;
background:red;
position:relative;
}
js:
var outer = document.querySelector('#outer');
var inner = document.querySelector('#outer>.inner');
outer.addEventListener('click',function(){
alert('outer');
});
inner.addEventListener('click',function(e){
e.stopPropagation();
},true);
javascript阻止事件冒泡的方法的更多相关文章
- JavaScript 阻止事件冒泡的实现方法
JavaScript 阻止事件冒泡,无使用其它插件来辅助,原生JS代码,考虑到浏览器的兼容性问题,这里对IE/火狐.Operating以及Chrome都有针对性的判断,代码如下: function c ...
- javascript阻止事件冒泡的兼容写法及其相关示例
//阻止事件冒泡的兼容写法 function stopBubble(e){ //如果提供了事件对象,则是一个非IE浏览器 if(e && e.stopPropagation) //因此 ...
- javascript 阻止事件冒泡 cancelBubble
javascript简单的阻止事件冒泡,可以使用事件的cancelBubble方法为true: html部分 <button id="btn1">点击显示div< ...
- javascript阻止事件冒泡和浏览器的默认行为
1.阻止事件冒泡,使成为捕获型事件触发机制. 1 function stopBubble(e) { 2 //如果提供了事件对象,则这是一个非IE浏览器 3 if ( e && e.st ...
- JavaScript阻止事件冒泡(兼容IE、Chrome、FF)
这里仅仅是一个简单代码demo,因为时间问题并未做深入研究,因为今天做项目时要用到阻止事件冒泡的内容,找了好多才找到一个可以使用的,特记录之. <!DOCTYPE HTML> <ht ...
- javascript 阻止事件冒泡和阻止默认事件对比
公司项目有像上图中效果的功能需求这也是很常见功能很简单功能,通过一个小例子和大家聊聊js的事件冒泡和默认事件. 先说说一般的实现方式即使用阻止事件冒泡的方式去做,给input绑定一个click事件(并 ...
- jquery阻止事件冒泡的方法
$("table tbody").click(function(e) { e.preventDefault(); //阻止自身的事件,并不能阻止冒泡 e.stopPropagati ...
- javascript 阻止事件冒泡
阻止冒泡 冒泡简单的举例来说,儿子知道了一个秘密消息,它告诉了爸爸,爸爸知道了又告诉了爷爷,一级级传递从而引起事件的混乱,而阻止冒泡就是不让儿子告诉爸爸,爸爸自然不会告诉爷爷了. 举个栗子: 父容器是 ...
- JavaScript阻止事件冒泡
今天在自学敲代码的时候发现了一个问题,当时的例子如下: <!DOCTYPE html> <html lang="en"> <head> < ...
随机推荐
- BeX5 常见问题解决办法
1.获取当前Activity的名称 Activity activity = ProcessUtils.getActivityInProcessContext(); String activityNam ...
- SQL Where 字符串拼接
) set @s='1,2,3' --法一: --法二: exec('select * from tb where id in ('+@s+')')
- 用Python+Django在Eclipse环境下开发web网站
一.创建一个项目如果这是你第一次使用Django,那么你必须进行一些初始设置.也就是通过自动生成代码来建立一个Django项目--一个Django项目的设置集,包含了数据库配置.Django详细选项设 ...
- rdlc设置指定列隐藏
此用户帐户对提案名称列不可见
- mysql主从延迟
1. MySQL数据库主从同步延迟原理.要说延时原理,得从mysql的数据库主从复制原理说起,mysql的主从复制都是单线程的操作,主 库对所有DDL和DML产生binlog,binlog是顺序写,所 ...
- android样式相关
转载自Keegan小钢,原文链接http://keeganlee.me/post/android/20150830
- BeautifulSoup练习
html1="""<!DOCTYPE html><html lang="en" xmlns="http://www.w3. ...
- 【Docker官方文档】理解Docker
本文来自Docker的官方文档,详细介绍了Docker的体系结构.重要概念.内部工作机理等内容,推荐不了解Docker内部原理的同学阅读. 什么是Docker? Docker是一个用于开发.交付和运行 ...
- ROS源码解读(一)--局部路径规划
博客转载自:https://blog.csdn.net/xmy306538517/article/details/78772066 ROS局部路径导航包括Trajectory Rollout 和 Dy ...
- 推荐一款基于XNA的开源游戏引擎《Engine Nine》
一.前沿导读 XNA是微软基于.Net部署的下一代3D/2D游戏开发框架,其实XNA严格来说类似下一代的DirectX,当然不是说XNA会取代DirectX,但是基于XNA我们对于面向XBOX360, ...