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. spring之scope作用域

    spring中,bean的作用域有五种类型:默认是单例模式,         singleton         prototype         request         session   ...

  2. 【HDOJ6227】Rabbits(贪心)

    题意:有n个位置,每次可以选其中一个往另外其它两个位置的中间插(如果有空的话),问最多能插几次 3<=n<=500 1 ≤ ai ≤ 10000 思路:显然可以把所有的空都利用起来 但最左 ...

  3. Redis的内部运作机制

    本文将分五个部分来分析和总结Redis的内部机制,分别是:Redis数据库.Redis客户端.Redis事件.Redis服务器的初始化步骤.Redis命令的执行过程. 首先介绍一下Redis服务器的状 ...

  4. FireDac心得

    usesFireDAC.Phys.MySQL, FireDAC.Stan.Def, FireDAC.DApt, FireDAC.Comp.Client, FireDAC.Comp.UI, FireDA ...

  5. [Inside HotSpot] Serial垃圾回收器 (二) Minor GC

    Serial垃圾回收器Minor GC 1. DefNewGeneration垃圾回收 新生代使用复制算法做垃圾回收,比老年代的标记-压缩简单很多,所有回收代码都位于DefNewGeneration: ...

  6. express---express-session axios

    express---express-session axios 使用axios访问后台获取session中的属性值为undefined 在main.js中导入axios import axios fr ...

  7. Maven的仓库

    以下内容引用自https://ayayui.gitbooks.io/tutorialspoint-maven/content/book/maven_repositories.html: 什么是Mave ...

  8. 利用systemtap定位ifconfig dropped数据包的原因

    http://blog.chinaunix.net/uid-20662820-id-3842431.html   欢迎转载,转载请保留文章的完整性!Author: Tony <tingw.liu ...

  9. VMware Workstation 虚拟机设置连接U盘

    首先确保主机有开启"VMware USB Arbitration Service"服务,而且在执行中. 如图:(我的系统是win8.1 ) 在VMware Workstation虚 ...

  10. POJ 3518 Prime Gap(素数)

    POJ 3518 Prime Gap(素数) id=3518">http://poj.org/problem? id=3518 题意: 给你一个数.假设该数是素数就输出0. 否则输出比 ...