<!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. Metaspace 之一：Metaspace整体介绍（永久代被替换原因、元空间特点、元空间内存查看分析方法）

    回顾 根据JVM内存区域的划分,简单的画了下方的这个示意图.区域主要分为两大块,一块是堆区(Heap),我们所New出的对象都会在堆区进行分配,在C语言中的malloc所分配的方法就是从Heap区获取 ...

  2. Java之修改文件内容：字符串逐行替换

    依赖包: <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</a ...

  3. jupyter快捷键

    jupyter快捷键(jupyter有两个模式,命令模式和编辑模式) 当前cell侧边为蓝色时,表示此时为命令模式,按Enter切换为编辑模式 当前cell侧边为绿色时,表示此时为编辑模式,按Esc切 ...

  4. 03 Zabbix常用的术语

    03 Zabbix常用的术语 host(主机): 要监控的网络设备,可由IP或DNS名称指定 host group(主机组):主机的逻辑容器,可以包含主机和模板,但同一个组内的主机和模板不能互相链接: ...

  5. 【BZOJ3507】通配符匹配（哈希，动态规划）

    [BZOJ3507]通配符匹配(哈希,动态规划) 题面 BZOJ 题解 对于匹配唯一存在影响的只有通配符,而\(?\)的影响也并不大,所以唯一需要仔细考虑的是\(*\). 考虑一个\(dp\),设\( ...

  6. 教你如何开启/关闭ubuntu防火墙

    目录  [隐藏]  1 安装方法 2 使用方法 3 推荐设置 4 详细使用说明 安装方法 sudo apt-get install ufw 当然,这是有图形界面的(比较简陋),在新立得里搜索gufw试 ...

  7. Shell基础知识（四）

    字符串详解 字符串可以由 单引号/双引号/无引号 包围.如下所示 >> str1=hello str2="hello" str3='hello' << 三种 ...

  8. LOJ 2664. 「NOI2013」向量内积 解题报告

    #2664. 「NOI2013」向量内积 两个 \(d\) 维向量 \(A=[a_1, a_2 ,...,a_d]\) 与 \(B=[b_1 ,b_2 ,...,b_d]\) 的内积为其相对应维度的权 ...

  9. Django + Uwsgi +Nginx生产环境部署

    python manage.py runserver 0.0.0.0:80 ,一定不要用这个轻量级Server作为你的生产环境下的Server,因为它只能用于开发自测阶段.它既没有安全审计功能,而且又 ...

  10. 20145215《网络对抗》Exp6 信息搜集与漏洞扫描

    20145215<网络对抗>Exp6 信息搜集与漏洞扫描 基础问题回答 哪些组织负责DNS,IP的管理? 全球根服务器均由美国政府授权的ICANN统一管理,负责全球的域名根服务器.DNS和 ...