<!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. mysql常用增删改查命令(纯纪录.orm用得基本功都没了。)

    更新表数据: update table_name set xxx=xxx where condition; 增加字段: alter table table_name add field type ot ...

  2. SpringMVC @RequestBody的使用

    @RequestBody的作用 @RequestBody用于读取Request请求的body数据,然后利用SpringMVC配置的HttpMessageConverter对数据进行转换,最后把转换后的 ...

  3. Hbase Shell 数据操作说明

    启动.关闭hbase./bin/start-hbase.sh./bin/stop-hbase.sh 查询HBase版本.它的语法如下:hbase(main):010:0> version 建表c ...

  4. selenium之调用Javascript

    selenium调用Javascript使用方法: driver.execute_script(js) 使用JS获取元素文本值,代码片段如下: ...... js = "return $(' ...

  5. BZOJ3545&3551[ONTAK2010]Peaks——kruskal重构树+主席树+dfs序+树上倍增

    题目描述 在Bytemountains有N座山峰,每座山峰有他的高度h_i.有些山峰之间有双向道路相连,共M条路径,每条路径有一个困难值,这个值越大表示越难走,现在有Q组询问,每组询问询问从点v开始只 ...

  6. QAU 17校赛 J题 剪丝带（完全背包变形）

    题意: 剪一段丝带,对于剪完后的每一段丝带长度必须是a,b,c 输入丝带的长度  n 和  a  b  c 输出一个整数,代表最多能剪成多少段 样例输入 5 5 3 2 7 5 5 2 样例输出 2 ...

  7. git push -f

    有的时候使用GIT工作时,会遇到一下这种问题, Pushing to git@github.com:519ebayproject/519ebayproject.git To git@github.co ...

  8. 架构师成长之路2.3-PXE+Kickstart无人值守大量部署Linux

    点击返回架构师成长之路 架构师成长之路2.3-PXE+Kickstart无人值守大量部署Linux 所谓的无人值守,就是自动应答,当安装过程中需要人机交互提供某些选项的答案时(如如何分区),自动应答文 ...

  9. 【LOJ#6374】网格（二项式反演，容斥）

    [LOJ#6374]网格(二项式反演,容斥) 题面 LOJ 要从\((0,0)\)走到\((T_x,T_y)\),每次走的都是一个向量\((x,y)\),要求\(0\le x\le M_x,0\le ...

  10. BZOJ3118 Orz the MST 【单纯形 + 生成树】

    题目链接 BZOJ3118 题解 少有的单纯形好题啊 我们先抽离出生成树 生成树中的边只可能减,其它边只可能加 对于不在生成树的边,其权值一定要比生成树中其端点之间的路径上所有的边都大 然后就是一个最 ...