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. 洛谷3830 [SHOI2012]随机树 【概率dp】

    题目 输入格式 输入仅有一行,包含两个正整数 q, n,分别表示问题编号以及叶结点的个数. 输出格式 输出仅有一行,包含一个实数 d,四舍五入精确到小数点后 6 位.如果 q = 1,则 d 表示叶结 ...

  2. xml和数组互转

    /** * 输出xml字符 * @param $params 参数名称 * return string 返回组装的xml **/ public function data_to_xml( $param ...

  3. 【AIM Tech Round 5 (Div. 1 + Div. 2) 】

    A:https://www.cnblogs.com/myx12345/p/9844152.html B:https://www.cnblogs.com/myx12345/p/9844205.html ...

  4. 转 DOS 8.3 文件名命名规则

    http://www.360doc.com/content/10/0813/14/73007_45757514.shtml DOS 8.3 文件名命名规则 经常看到命令行或者其它软件在显示目录的时候出 ...

  5. 三国武将查询系统 //Java 访问 数据库

    import java.awt.*; import javax.swing.*; import java.awt.event.ActionListener; import java.awt.event ...

  6. SPOJ 26108 TRENDGCD - Trending GCD

    Discription Problem statement is simple. Given A and B you need to calculate S(A,B) . Here, f(n)=n, ...

  7. argument to nsmutablearray method addobject cannot be nil 警告

    You cannot add nil to an NSMutableArray, and you will raise an exception if you try to. There's NSNu ...

  8. lamp安装手稿

    1.最重要的东西如何查看帮助 --help 文件夹简易意义:管理类文件夹/boot 启动文件/bin 常用命令/sbin 系统管理员的管理程序/var 存放常修改文件/etc 系统管理用到配置文件/d ...

  9. 若菜acmer感觉自己智商全然被碾压了QAQ~~

    题目大意是:输入n,m,给出n*m(n.m<=100)的不是正规的布满棋子的棋盘,求最少改几个棋子能够使得棋盘正规,正规的棋盘必须是每一个相邻的棋子颜色都不同(仅仅有黑白两种,用0,1取代) 比 ...

  10. C/C++知识要点2——STL中Vector、Map、Set容器的实现原理

    1.Vector是顺序容器.是一个动态数组.支持随机存取.插入.删除.查找等操作,在内存中是一块连续的空间.在原有空间不够情况下自己主动分配空间.添加为原来的两倍.vector随机存取效率高,可是在v ...