<!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. pandas.DataFrame

    1.可以使用单个列表或列表列表创建数据帧(DataFrame). 单个列表 import pandas as pd data = [1,2,3,4,5] df = pd.DataFrame(data) ...

  2. 使用ssh tunnel 来做代理或跳板

    接前文 http://www.cnblogs.com/piperck/p/6188984.html  使用ssh config配置文件来管理ssh连接 前文说了如何配置自己的ssh config 来方 ...

  3. Markdown 文件转化为work文档

    1. 电脑安装pandoc 链接:https://pan.baidu.com/s/12H5wLO0JWph5TjrbeJI6mg 密码:ssgs 下载安装包解压即可用.记得配置系统环境变量 2.命令行 ...

  4. BZOJ2631tree——LCT

    题目描述 一棵n个点的树,每个点的初始权值为1.对于这棵树有q个操作,每个操作为以下四种操作之一:+ u v c:将u到v的路径上的点的权值都加上自然数c:- u1 v1 u2 v2:将树中原有的边( ...

  5. 菜鸟学习计划浅谈之Linux系统 原

    人这一生都是在不断地学习,不断地进步中度过的,刚开始学习任何一门知识的时候,我们都习惯性的称自己为菜鸟,觉得自己对这方面的知识欠缺,水平很low,我也是如此.但我擅长总结,对于自己学习的新知识,总结学 ...

  6. Leetcode 191.位1的个数 By Python

    编写一个函数,输入是一个无符号整数,返回其二进制表达式中数字位数为 '1' 的个数(也被称为汉明重量). 示例 : 输入: 11 输出: 3 解释: 整数 11 的二进制表示为 00000000000 ...

  7. adb is down 的解决方法

    今天装完android Eclipse 之后 ,运行时报出这么个错误 : The connection to adb is down, and a severe error has occured.  ...

  8. 【转】在单片机中，C语言的一些误用和总结！

    在学习单片机的时候才真正知道C语言是什么,它是来干什么的~但是C语言用到嵌入式只是它小小的一部分应用,还有很多地方呢. 我们是不是在写程序的时候,错误很多就算编译通过了也达不到我们预期的结果,完了自己 ...

  9. 将一个字符串中的空格替换成“%20”（C、Python）

    将一个字符串中的空格替换成“%20” C语言: /* ----------------------------------- 通过函数调用,传地址来操作字符串 1.先计算出替换后的字符串的长度 2.从 ...

  10. 经典的GDB调试命令

    在你调试程序时,当程序被停住时,你可以使用print命令(简写命令为p),或是同义命令inspect来查看当前程序的运行数据.print命令的格式是: printprint /是表达式,是你所调试的程 ...