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> < ...
随机推荐
- day16-作业 后台管理
二话不说开撸作业 作业要求: 后台管理平台 ,编辑表格:1. 非编辑模式:可对每行进行选择: 反选: 取消选择2. 编辑模式:进入编辑模式时如果行被选中,则被选中的行万变为可编辑状态,未选中的不改变退 ...
- C++深度解析教程学习笔记(3)函数的扩展
1.内联函数 1.1.常量与宏的回顾 (1)C++中的 const 常量可以替代宏常数定义,如: ; //等价于 #define A 3 (2)C++中是否有解决方案,可以用来替代宏代码片段呢? 1. ...
- Python基础学习六 操作Redis
import redis r = redis.Redis(host=',db=1) #set get delete setex 都是针对string类型的 k-v # r.set('louis_ses ...
- Unable to find required classes (javax.activation.DataHandler and javax.mail.internet.MimeMultipart)
在接触WebService时值得收藏的一篇文章: 在调试Axis1.4访问WebService服务时,出现以下错误: Unable to find required classes (javax.ac ...
- mysql之约束以及修改数据表
数据约束的分类: ———————————————————————————————————————————————————— 外键约束的要求解析: //在my文件中的这句话代表着搜索引擎,如果不是的就需 ...
- 【原】Coursera—Andrew Ng机器学习—Week 4 习题—Neural Networks 神经网络
[1] Answer:C [2] Answer:D 第二层要输出四个元素a1 a2 a3 a4.输入x有两个,加一个x0是三个.所以是4 * 3 [3] Answer:C [4] Answer:C [ ...
- 刷题向》图论》BZOJ1179 关于tarjan和SPFA的15秒(normal)
这道题可以考察图论的掌握程度(算半道水题) 题目如下 输入 第一行包含两个整数N.M.N表示路口的个数,M表示道路条数.接下来M行,每行两个整数,这两个整数都在1到N之间,第i+1行的两个整数表示第i ...
- 微信小程序怎么获取用户输入
能够获取用户输入的组件,需要使用组件的属性bindchange将用户的输入内容同步到 AppService. <input id="myInput" bindchange=& ...
- 1.scala基础语法总结
Scala基础语法总结:Scala 与 Java 的最大区别是:Scala 语句末尾的分号 ; 是可选的.如果一行里写多个语句那么分号是需要的 val s = "菜鸟教程"; pr ...
- c# 导入c++ dll
1.类的函数的内联实现 #include "stdafx.h" #include "testdll.h" #include <iostream> # ...