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

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

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. python selenium环境配置Firefox和Chrome

    1.下载Selenium库,可以使用pip install selenium https://pypi.python.org/pypi/selenium/ 2.下载驱动 Chrome: https:/ ...

  2. 2-2 groovy基础知识-理论介绍

  3. 【bzoj1025】[SCOI2009]游戏

    1025: [SCOI2009]游戏 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 1987  Solved: 1289[Submit][Status] ...

  4. ajax load事件

    ajax.load  使用ajax 来改变div元素文本. load( url [, data][, callback] ) load()方法的传递方式根据参数data来自动指定.如果没有参数传递,则 ...

  5. AOP基本概念、AOP底层实现原理、AOP经典应用【事务管理、异常日志处理、方法审计】

    1 什么是AOP AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP是OOP的延续,是软件 ...

  6. jsp Ajax请求(返回html标签)

    <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http:// ...

  7. Glade编程

    一.简介 如果有一种软件能将图形界面的设计及时地展现于开发人员的面前,而且在设计完后能直接看到界面的外观效果,这样就使程序员的主要精力集中于应用程序核心功能的开发上,这就是所谓的可视化编程思想.   ...

  8. 如何获取.properties配置文件

    如何获取.properties配置文件 分析思路: 先使用流和文件关联,即读取文件 再读取文件内容,一行一行读取 字符分割“=”  键值对 然后把键值对放到集合中去 但是Properties类里面有方 ...

  9. 编写高质量代码改善C#程序的157个建议——建议17:多数情况下使用foreach进行循环遍历

    建议17:多数情况下使用foreach进行循环遍历 由于本建议涉及集合的遍历,所以在开始讲解本建议之前,我们不妨来设想一下如何对结合进行遍历.假设存在一个数组,其遍历模式可以采用依据索引来进行遍历的方 ...

  10. XE中FMX操作ListBox,添加上千条记录(含图片)

    我之前是想在ListBox的每个Item上添加一个图片,Item上所有的内容都是放在Object里赋值,结果发现加载一百条记录耗时四五秒: procedure TMainForm.AddItem; v ...