<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>js 事件event</title>

    <script>

        window.onload=function() {

            var button=document.getElementById("button");

            var box=document.getElementById("box");

            button.onclick=function(ev){

                 box.style.display="block";

                 var oEvent=ev||event;     //兼容火狐，ie,谷歌

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

            }

            document.onclick=function(ev){

                box.style.display="none";

                //var oEvent=ev||event;

                //alert(oEvent.clientX+","+ oEvent.clientY);//兼容火狐，ie,谷歌

            }

            // var ss = document.childNodes[1].tagName;

            // alert(ss);  //html

        }

    </script>

</head>

<body>

    <input type="button" value="按钮" id="button">

    <div id="box" style="width:500px;height: 300px;background: gray; display: none"></div>

</body>

</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 Launcher分析和修改2——Icon修改、界面布局调整、壁纸设置

    上一篇文章说了如何修改Android自带Launcher2的默认界面设置(http://www.cnblogs.com/mythou/p/3153880.html). 今天主要是说说Launcher里 ...

  2. 【iCore4 双核心板_FPGA】例程二：GPIO输入实验——识别按键输入

    实验现象: 按键每按下一次,三色LED切换一次状态. 核心源代码: module key_ctrl( input clk_25m, input rst_n, input key, output fpg ...

  3. 【emWin】例程二十六：窗口对象——Listbox

    简介: 列表框用于选择列表的一个元素.创建的列表框可以没有环绕的框架窗口,或者作为 FRAMEWIN 小工具的子窗口建立列表框中的项目被选定后,会突出显示. 触摸校准(上电可选择是否进入校准界面) 示 ...

  4. hive表增量抽取到mysql(关系数据库)的通用程序(三)

    hive表增量抽取到oracle数据库的通用程序(一) hive表增量抽取到oracle数据库的通用程序(二) 这几天又用到了该功能了,所以又改进了一版,增加了全量抽取和批量抽取两个参数.并且可以设置 ...

  5. Java知多少（68）面向字符的输出流

    面向字符的输出流都是类 Writer 的子类,其类层次结构如图 10-5 所示. 图10-5 Writer的类层次结构图 表 10-3 列出了 Writer 的主要子类及说明. 表 10-3 Writ ...

  6. Ruby学习小记

    ruby安装 方法一:使用apt-get安装 可以直接使用两个命令完成Ruby的安装. # sudo apt-get update # sudo apt-get install ruby 或者 # s ...

  7. 开源分布式日志系统ExceptionLess部署杂乱笔记 加密

    前两天看到了这篇文章,亲身体会了下,确实不错,按照官方的文档试了试本地部署,折腾一番后终于成功,记下心得在此,不敢独享. 本地部署官方wiki .NET 4.6.1 这个因为我装了VS2015,就没有 ...

  8. [Full-stack] 跨平台大框架 - RN

    前言 React-Redux的大全栈代码复用理论有点意思,给出一个具体的例子:[React] 15 - Redux: practice IM 因为与react内容天然地部分重合,故这里将重点放在了对c ...

  9. android编译错误--/usr/bin/ld: cannot find -lz

    编译时出现/usr/bin/ld: skipping incompatible /usr/lib/gcc/x86_64-linux-gnu/4.4.5/../../../libz.so when se ...

  10. iOS 判断两个日期之间的间隔

    本文转载至 http://www.cnblogs.com/Ewenblog/p/3891791.html   两个时间段,判断之间的相差,做一些时间范围限制使用 NSDateFormatter * d ...