1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>js 事件event</title>
  6.     <script>
  7.         window.onload=function() {
  8.             var button=document.getElementById("button");
  9.             var box=document.getElementById("box");
  10.             button.onclick=function(ev){
  11.                  box.style.display="block";
  12.                  var oEvent=ev||event;     //兼容火狐，ie,谷歌
  13.                  oEvent.cancelBubble=true; //取消事件冒泡
  14.             }
  15.  
  16.             document.onclick=function(ev){
  17.                 box.style.display="none";
  18.  
  19.                 //var oEvent=ev||event;
  20.                 //alert(oEvent.clientX+","+ oEvent.clientY);//兼容火狐，ie,谷歌
  21.  
  22.             }
  23.             // var ss = document.childNodes[1].tagName;
  24.             // alert(ss);  //html
  25.         }
  26.     </script>
  27. </head>
  28. <body>
  29.  
  30.     <input type="button" value="按钮" id="button">
  31.     <div id="box" style="width:500px;height: 300px;background: gray; display: none"></div>
  32. </body>
  33. </html>

原声js，取消事件冒泡，点击按钮，显示box,点击屏幕其他地方，box隐藏的更多相关文章

  1. js 取消事件冒泡

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

  2. JS——取消事件冒泡，实现div的显示与隐藏 event.cancelBubble = true;

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

  3. jq 点击按钮显示div,点击页面其他任何地方隐藏div

    css .bl_rencai_32{ float: left; height: 35px; line-height: 35px; } .bl_rencai_32 >input{ width: 3 ...

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

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

  5. js html 事件冒泡

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

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

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

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

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

  8. jquery取消事件冒泡的三种方法展示

    jquery取消事件冒泡的三种方法展示 html代码 <!doctype html> <html> <head> <meta charset="ut ...

  9. 学习javaScript必知必会(4)~事件、事件绑定、取消事件冒泡、事件对象

    1.常用的事件: ① onload:页面加载 ② onblur: 失去焦点 onfocus: 获取焦点 ③ onclick:点击 ④ onmouseover:鼠标经过 onmouseout:鼠标离开 ...

随机推荐

  1. Android 实现顶层窗口、浮动窗口（附Demo）

    做过Window程序开发的朋友应该都知道,我们要把程序窗口置顶很简单,只要设置一些窗口属性即可.但是到了Android,你无法简单设置一个属性,就让Android的Activity置顶.因为只要有新的 ...

  2. SOLID原则 【转】

    S.O.L.I.D 是面向对象设计(OOD)和面向对象编程(OOP)中的几个重要编码原则(Programming Priciple)的首字母缩写. 面向对象设计的原则 SRP  The Single ...

  3. Java知多少（10）数据类型及变量

    Java 是一种“强类型”的语言,声明变量时必须指明数据类型.变量(variable)占据一定的内存空间.不同类型的变量占据不同的大小. Java中共有8种基本数据类型,包括4 种整型.2 种浮点型. ...

  4. python笔记2-数据类型：列表[List]常用操作

    序列是Python中最基本的数据结构.序列中的每个元素都分配一个数字 - 它的位置,或索引,索引从0开始,依此类推. 序列都可以进行的操作:包括 索引,切片,加,乘,检查成员. 列表是最常用的Pyth ...

  5. Java8学习笔记（九）--日期/时间（Date Time）API指南

    Java 8日期/时间( Date/Time)API是开发人员最受追捧的变化之一,Java从一开始就没有对日期时间处理的一致性方法,因此日期/时间API也是除Java核心API以外另一项倍受欢迎的内容 ...

  6. duilib进阶教程 -- TreeView控件(6)

    代码下载:http://download.csdn.net/detail/qq316293804/6483905 上一个教程中,界面已经和迅雷一模一样啦,大小和位置一个像素都不差哟,亏得Alberl调 ...

  7. ThinkingInJava 学习 之 0000003 控制执行流程

    1. if-else 2. 迭代 1. while 2. do-while 3. for 4. 逗号操作符 Java里唯一用到逗号操作符的地方就是for循环的控制表达式. 在控制表达式的初始化和步进控 ...

  8. Maven传递依赖的坑：父pom中dependencyManagement版本优先级高于传递依赖版本

    一.由来 之前同事问了个问题,就是当前工程为spring boot项目,假设版本号为2.0.3 这个项目中依赖了一个spring boot项目依赖(先别管为啥有这么奇葩的依赖,这个版本是1.5.9). ...

  9. svn st 状态详解

    svn st status (stat, st): 显示工作副本中目录与文件的状态.用法: status [PATH...]  未指定参数时,只显示本地修改的条目(没有网络访问).  使用 -q 时, ...

  10. mysql 登录远程数据库

    mysql -h${hostIP} -P${hostPort} -u${userName} -p${passwd}