javascript简单的阻止事件冒泡,可以使用事件的cancelBubble方法为true;

html部分

<button id="btn1">点击显示div</button>
<div id="showDiv">
显示了
</div>

js部分

window.onload = function(){
var btn1 = document.getElementById("btn1");
var showDiv = document.getElementById("showDiv");
btn1.onclick = function(ev){
var oEvent = ev || event;
showDiv.style.display = "block";
//阻止时间冒泡
oEvent.cancelBubble = true;
}
document.onclick = function(){
showDiv.style.display = "none";
}
}

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

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

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

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

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

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

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

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

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

  5. javascript 阻止事件冒泡

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

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

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

  7. JavaScript阻止事件冒泡

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

  8. javascript阻止事件冒泡的方法

    有的时候我们需要实现这样的功能: 点击某个蒙版,该蒙版消失,但是如果点击蒙版上的某个元素,希望蒙版不消失,这就需要用到阻止事件的冒泡了 html: <div id="outer&quo ...

  9. 理解阻止浏览器默认事件和事件冒泡cancelBubble

    一.阻止浏览器默认事件 1.先举个例子说什么是 浏览器的默认事件 : 比如有一个输入框,当我按下字母a,就会在输入框显示字母a.就是浏览器本该发生的事情.小孩子一出生就会汲取母乳一样的道理,这些都是先 ...

随机推荐

  1. BZOJ 1191: [HNOI2006]超级英雄Hero【二分图匹配】

    裸的匹配题,一眼就能看出来二分图的模型,是某个经典题的改编.貌似某本图论书上讲过的,有N个人以及M个职位,每个职位只能提供给一个人,而每个人由于能力有限只能胜任有限个职位,问是否有办法使得每个人都有工 ...

  2. Laravel 控制器的session

    设置路由 //使用session,需要开启session,//session的开始类在/app/Kernel下//protected $middlewareGroups = [// 'web' =&g ...

  3. maven编码gbk的不可映射字符

    如图,老是出现这个错误,百度说是打开源文件,更改编码格式,或者是更改File Encodings 的编码格式,或者是更改java compiler --use computer为eclipse, 都不 ...

  4. vba功能语句

    VBA语句集(第1辑) 定制模块行为(1) Option Explicit '强制对模块内所有变量进行声明Option Private Module '标记模块为私有,仅对同一工程中其它模块有用,在宏 ...

  5. unix grep命令的大致实现

    用到了strstr(a,b)函数和getline()函数,strstr(a,b)函数看是否能在字符串a中找到字符串b,若找到返回指向,若没找到返回NULL strstr实现可以看:Implement ...

  6. Centos常用命名

    1.关机 (系统的关机.重启以及登出 ) 的命令 shutdown -h now 关闭系统(1) init 0 关闭系统(2) telinit 0 关闭系统(3) shutdown -h hours: ...

  7. sql 添加自定义排序

    Mysql : SELECT (@i:=@i+1) AS ind ,字段 FROM 表名 别名, (SELECT @i:=0) t WHERE `IsDeleted` = 0; Oracle: 本就有 ...

  8. [vxlan] 二 什么是VXLAN

    VXLAN是一种mac in UDP的技术.简单讲就是传统的二层帧被封装到了UDP的package中.通过UDP的IP网络发送到目的地然后再解封装. VXLAN 跟VLAN对比,最重要的一个概念就是V ...

  9. SpringMVC拦截器详解[附带源码分析](转)

    本文转自http://www.cnblogs.com/fangjian0423/p/springMVC-interceptor.html 感谢作者 目录 前言 重要接口及类介绍 源码分析 拦截器的配置 ...

  10. Eclipse FindBugs的安装

    原文:http://blog.sina.com.cn/s/blog_62186b460100l3mx.html 1安装:首先到官方网站下载最新版本FindBugs    http://findbugs ...