有的时候我们需要实现这样的功能:

点击某个蒙版,该蒙版消失,但是如果点击蒙版上的某个元素,希望蒙版不消失,这就需要用到阻止事件的冒泡了

  1. html:
  2. <div id="outer">
  3. <div class="inner">
  4. </div>
  5. </div>
  1. css:
  2. #outer{
  3. width:100px;
  4. height:100px;
  5. background:darkgrey;
  6. }
  7. #outer>.inner{
  8. width:50px;
  9. height:50px;
  10. background:red;
  11. position:relative;
  12. }
  1. js:
  2. var outer = document.querySelector('#outer');
  3. var inner = document.querySelector('#outer>.inner');
  4. outer.addEventListener('click',function(){
  5. alert('outer');
  6. });
  7. inner.addEventListener('click',function(e){
  8. e.stopPropagation();
  9. },true);

查看效果

javascript阻止事件冒泡的方法的更多相关文章

  1. JavaScript 阻止事件冒泡的实现方法

    JavaScript 阻止事件冒泡,无使用其它插件来辅助,原生JS代码,考虑到浏览器的兼容性问题,这里对IE/火狐.Operating以及Chrome都有针对性的判断,代码如下: function c ...

  2. javascript阻止事件冒泡的兼容写法及其相关示例

    //阻止事件冒泡的兼容写法 function stopBubble(e){ //如果提供了事件对象,则是一个非IE浏览器 if(e && e.stopPropagation) //因此 ...

  3. javascript 阻止事件冒泡 cancelBubble

    javascript简单的阻止事件冒泡,可以使用事件的cancelBubble方法为true: html部分 <button id="btn1">点击显示div< ...

  4. javascript阻止事件冒泡和浏览器的默认行为

    1.阻止事件冒泡,使成为捕获型事件触发机制. 1 function stopBubble(e) { 2 //如果提供了事件对象,则这是一个非IE浏览器 3 if ( e && e.st ...

  5. JavaScript阻止事件冒泡(兼容IE、Chrome、FF)

    这里仅仅是一个简单代码demo,因为时间问题并未做深入研究,因为今天做项目时要用到阻止事件冒泡的内容,找了好多才找到一个可以使用的,特记录之. <!DOCTYPE HTML> <ht ...

  6. javascript 阻止事件冒泡和阻止默认事件对比

    公司项目有像上图中效果的功能需求这也是很常见功能很简单功能,通过一个小例子和大家聊聊js的事件冒泡和默认事件. 先说说一般的实现方式即使用阻止事件冒泡的方式去做,给input绑定一个click事件(并 ...

  7. jquery阻止事件冒泡的方法

    $("table tbody").click(function(e) { e.preventDefault(); //阻止自身的事件,并不能阻止冒泡 e.stopPropagati ...

  8. javascript 阻止事件冒泡

    阻止冒泡 冒泡简单的举例来说,儿子知道了一个秘密消息,它告诉了爸爸,爸爸知道了又告诉了爷爷,一级级传递从而引起事件的混乱,而阻止冒泡就是不让儿子告诉爸爸,爸爸自然不会告诉爷爷了. 举个栗子: 父容器是 ...

  9. JavaScript阻止事件冒泡

    今天在自学敲代码的时候发现了一个问题,当时的例子如下: <!DOCTYPE html> <html lang="en"> <head> < ...

随机推荐

  1. day16-作业 后台管理

    二话不说开撸作业 作业要求: 后台管理平台 ,编辑表格:1. 非编辑模式:可对每行进行选择: 反选: 取消选择2. 编辑模式:进入编辑模式时如果行被选中,则被选中的行万变为可编辑状态,未选中的不改变退 ...

  2. C++深度解析教程学习笔记(3)函数的扩展

    1.内联函数 1.1.常量与宏的回顾 (1)C++中的 const 常量可以替代宏常数定义,如: ; //等价于 #define A 3 (2)C++中是否有解决方案,可以用来替代宏代码片段呢? 1. ...

  3. Python基础学习六 操作Redis

    import redis r = redis.Redis(host=',db=1) #set get delete setex 都是针对string类型的 k-v # r.set('louis_ses ...

  4. Unable to find required classes (javax.activation.DataHandler and javax.mail.internet.MimeMultipart)

    在接触WebService时值得收藏的一篇文章: 在调试Axis1.4访问WebService服务时,出现以下错误: Unable to find required classes (javax.ac ...

  5. mysql之约束以及修改数据表

    数据约束的分类: ———————————————————————————————————————————————————— 外键约束的要求解析: //在my文件中的这句话代表着搜索引擎,如果不是的就需 ...

  6. 【原】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 [ ...

  7. 刷题向》图论》BZOJ1179 关于tarjan和SPFA的15秒(normal)

    这道题可以考察图论的掌握程度(算半道水题) 题目如下 输入 第一行包含两个整数N.M.N表示路口的个数,M表示道路条数.接下来M行,每行两个整数,这两个整数都在1到N之间,第i+1行的两个整数表示第i ...

  8. 微信小程序怎么获取用户输入

    能够获取用户输入的组件,需要使用组件的属性bindchange将用户的输入内容同步到 AppService. <input id="myInput" bindchange=& ...

  9. 1.scala基础语法总结

    Scala基础语法总结:Scala 与 Java 的最大区别是:Scala 语句末尾的分号 ; 是可选的.如果一行里写多个语句那么分号是需要的 val s = "菜鸟教程"; pr ...

  10. c# 导入c++ dll

    1.类的函数的内联实现 #include "stdafx.h" #include "testdll.h" #include <iostream> # ...