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

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

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阻止事件冒泡的方法的更多相关文章

  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. AMFObject 数据格式浅析

    amf.h中关于 AMFObject 是这样的定义的: typedef struct AMFObject { int o_num; struct AMFObjectProperty *o_props; ...

  2. Spring Cloud Eureka 3 (Eureka client注册服务提供者)

    在完成服务注册中心的搭建后我们来尝试下将一个既有的spring boot应用加入eureka的服务治理体系中 新建一个spring boot项目加入eureka client依赖 这里加入的eurek ...

  3. Vulkan Tutorial 09 图像与视图

    操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Visual Studio 2017 使用任何的VkImage,包括在交换链或者渲染管线中的,我们都需要创建VkImage ...

  4. 常用Linux命令-文件上传和下载

    rz 上传本地文件到远程服务器 sz fileName 下载文件到本地电脑 如果不能使用以上命令进行文件上传和下载需要安装命令,步骤如下: 1.软件安装1)编译安装root 账号登陆后,依次执行以下命 ...

  5. 在cmd中 操作 数据库 MySQL 的一些命令

    环境变量配置配置好以后, 打开cmd 连接:mysql -h主机地址 -u用户名 -p用户密码 (注:u与root可以不用加空格,其它也一样) 断开:exit (回车) 创建授权:grant sele ...

  6. codeforce469DIV2——C. Zebras

    题意 0, 010, 01010 这一类的01交替且开头和结尾都为0的序列被称为zebra序列.给出一段01序列,尝试能否把他分为k个子序列使得每个子序列都是zebra序列. 分析 这个题应该算是水题 ...

  7. java就业指南 zookeeper分布式系统 zookeeper实现分布式锁 有用

    目前几乎很多大型网站及应用都是分布式部署的,分布式场景中的数据一致性问题一直是一个比较重要的话题.分布式的CAP理论告诉我们“任何一个 分布式系统都无法同时满足一致性(Consistency).可用性 ...

  8. Linux xclip命令

    一.简介 xclip命令建立了终端和剪切板之间通道,可以用于以命令的方式将终端输出或文件的内容保存到剪切板中,也可以用于将剪切板的内容输出到终端或文件中. 在 X 系统里面,从一个窗口复制一段文字到另 ...

  9. c# 常规验证基类

    using System;using System.Collections.Generic;using System.Linq;using System.Text.RegularExpressions ...

  10. Entity Framework 6.0 Tutorials(1):Introduction

    以下系统文章为EF6.0知识的介绍,本章是第一篇 原文地址:http://www.entityframeworktutorial.net/entityframework6/introduction.a ...