<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style>

    #div1 { width:300px; height:450px; background-color:#99FFFF; display:none;}

</style>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<script>

    window.onload = function(){

        var myBtn1 = document.getElementById("btn1");

        var myDiv1 = document.getElementById("div1");

        myDiv1.onclick = function(ev){

            var divEvent = ev || event;//事件支持火狐浏览器和IE浏览器

            divEvent.cancelBubble = true;//取消事件冒泡

        };

        //点击按钮时，div显示,在函数中加入参数ev

        myBtn1.onclick = function(ev){

            var myEvent = ev || event;//事件支持火狐浏览器和IE浏览器

            myDiv1.style.display = "block";

            myEvent.cancelBubble = true;//取消事件冒泡

        };

        //点击其他的空白页面是，div1消失

        document.onclick = function(){

            myDiv1.style.display = "none";

        };

    };

</script>

</head>

<body>

    <input id="btn1" type="button" value="显示" />

    <div id="div1">点击按钮，我显示了。点击空白处试试</div>

</body>

</html>

JS——取消事件冒泡，实现div的显示与隐藏 event.cancelBubble = true;的更多相关文章

  1. 原生JS的移入溢出控制div的显示与隐藏

    原生JS的移入溢出控制div的显示与隐藏的写法 上面的写法火狐存在兼容性

  2. js 取消事件冒泡

    html部分 <input type="button" id="btn1" value="按钮" /> <div id=& ...

  3. js的事件冒泡和点击其他区域隐藏弹出层

    一.前言 在编写页面的时候,我们经常使用到弹出层.对于弹出层,原本的意义就是增加与用户的交互,提升用户的好感度.如果弹出层都没有较好的体验,那何谈通过交互来提升好感... 首先提出几个弹出层的注意点: ...

  4. 对于js中事件冒泡的理解分析

    一. 事件 事件的三个阶段:事件捕获 -> 事件目标 -> 事件冒泡 捕获阶段:先由文档的根节点document往事件触发对象,从外向内捕获事件对象: 目标阶段:到达目标事件位置(事发地) ...

  5. vue.js阻止事件冒泡和默认事件

    首先我们来看原生JS取消事件冒泡方法: e.stopPropagation(); //非IE浏览器window.event.cancelBubble = true; //IE浏览器 原生JS阻止默认事 ...

  6. js阻止浏览器、元素的默认事件与js阻止事件冒泡、阻止事件流

    嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下js阻止默认事件与js阻止事件冒泡示例,大家参考使用吧   1. event.prev ...

  7. 原声js，取消事件冒泡，点击按钮，显示box,点击屏幕其他地方，box隐藏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. jQuery 取消事件冒泡 阻止后续内容执行 闭包函数 (学习笔记)

    1.取消事件冒泡 <title>取消事件冒泡</title> <style> div { border:solid 1px black; } </style& ...

  9. js 停止事件冒泡 阻止浏览器的默认行为（阻止超连接 # ）

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...

随机推荐

  1. 数据类型+内置方法 python学习第六天

    元组 用途:不可变的列表,能存多个值,但多个值只有取的需求而没有改的需求. 定义方式:在()内用逗号分隔开多个元素,可以存放任意类型的值. names=(‘alex’,’blex’,’clex’) 强 ...

  2. vander范德蒙德行列式

    https://baike.baidu.com/item/%E8%8C%83%E5%BE%B7%E8%92%99%E8%A1%8C%E5%88%97%E5%BC%8F function m=vande ...

  3. JAVA内部类小结

    内部类的概念:定义在其他类里面的类叫做内部类,包含内部类的类叫做外部类: 内部类的作用:内部类主要是用来描述一个事物存在于另一个事物里面,依赖于外部事物存在的: 内部类的格式: 内部类的分类: 成员内 ...

  4. day11 内置函数

    特殊算数运算 计算整数的和 l = [1,2,3,4,5] print(sum(l)) 除法运算,然后取余 在做页面的时候可以根据数据量分页的时候使用 print(divmod(10,3)) # (3 ...

  5. 【 HDU1081 】 To The Max （最大子矩阵和）

    题目链接 Problem - 1081 题意 Given a two-dimensional array of positive and negative integers, a sub-rectan ...

  6. 自学工业控制网络之路1.5-典型的现场总线介绍DeviceNet

    返回 自学工业控制网络之路 自学工业控制网络之路1.5-典型的现场总线介绍DeviceNet 2002年10月DeviceNet被批准为中国国家标准GB/T18858.3-2002,并于2003.4. ...

  7. [luogu4201][bzoj1063]设计路线【树形DP】

    题目描述 Z国坐落于遥远而又神奇的东方半岛上,在小Z的统治时代公路成为这里主要的交通手段.Z国共有n座城市,一些城市之间由双向的公路所连接.非常神奇的是Z国的每个城市所处的经度都不相同,并且最多只和一 ...

  8. bzoj1691/luogu2869 [USACO07DEC]挑剔的美食家 (STL::set)

    给牛和草都按价格排序,然后贪心地把草给牛(就是尽量给满足价格的.要求的美味度最高但不超过这个草的美味度的牛) 这个可以用一个平衡树来维护,偷懒直接用multiset了 #include<bits ...

  9. bzoj5280/luogu4376 MilkingOrder (二分答案+拓扑序)

    二分答案建图,然后判环,就可以了. 字典序输出的话,只要做拓扑序的时候用优先队列来维护就可以了. (其实判环也可以用拓扑序...) #include<cstdio> #include< ...

  10. Linux:进程实例信息（/proc）

    https://blog.csdn.net/test1280/article/details/73632333 Linux:进程实例信息(/proc) 问几个问题: 1.怎么知道一个进程对应哪个可执行 ...