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. [SDOI2008]仪仗队 (欧拉函数)

    题目描述 作为体育委员,C君负责这次运动会仪仗队的训练.仪仗队是由学生组成的N * N的方阵,为了保证队伍在行进中整齐划一,C君会跟在仪仗队的左后方,根据其视线所及的学生人数来判断队伍是否整齐(如下图 ...

  2. jmeter录制接口以及并发测试

    http://jingyan.baidu.com/article/15622f2475601dfdfdbea548.html

  3. 纯干货,Mysql innodb的ACID特性是怎么实现的?以及高并发情况下会出现的问题

    首先说说什么是ACID: 它们分别是Atomicity(原子性),Consistency(一致性),Isolation(隔离性),Transaction(持久性) 原子性: 意为单个事务里的多个操作要 ...

  4. 济南学习 Day 5 T1 晚

    取模(mod) [题目描述] 有一个整数a和n个整数b_1, …, b_n.在这些数中选出若干个数并重新排列,得到c_1,…, c_r.我们想保证a mod c_1 mod c_2 mod … mod ...

  5. springboot收集

    Spring Boot实战:拦截器与过滤器 参考:https://blog.csdn.net/m0_37106742/article/details/64438892 https://www.ibm. ...

  6. 2017-10-29-morning-清北模拟赛

    T1 遭遇 #include <algorithm> #include <cstdio> #include <cmath> inline void read(int ...

  7. Codeforces 735 E Ostap and Tree

    Discription Ostap already settled down in Rio de Janiero suburb and started to grow a tree in his ga ...

  8. centos 下完全卸载 mysql5.6

    查看已经安装的服务 rpm –qa|grep -i mysql -i 作用是不区分大小写 yum remove mysql mysql-server mysql-libs compat-mysql51 ...

  9. Android SDK Manager 更新时的“https://dl-ssl.google.com refused”错误

    Android SDK Manager 消除SDK更新时的“https://dl-ssl.google.com refused”错误 消除SDK更新时,有可能会出现这样的错误:Download int ...

  10. Flink学习(一)

    Apache Flink是一个面向分布式数据流处理和批量数据处理的开源计算平台,它能够基于同一个Flink运行时,提供支持流处理和批处理两种类型应用的功能. 现有的开源计算方案,会把流处理和批处理作为 ...