<!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. JVM内存管理及垃圾回收【转】

    很多Java面试的时候,都会问到有关Java垃圾回收的问题,提到垃圾回收肯定要涉及到JVM内存管理机制,Java语言的执行效率一直被C.C++程序员所嘲笑,其实,事实就是这样,Java在执行效率方面确 ...

  2. Ubuntu下的Wine&WineQQ

    一.安装Wine 1.添加PPA sudo add-apt-repository ppa:ubuntu-wine/ppa 2.更新列表 sudo apt-get update 3.安装Wine sud ...

  3. rabbitmq启动异常table_attributes_mismatch

    rabbitmq启动异常table_attributes_mismatch 2017年01月09日 16:57:50 growithus 阅读数:18     [root@localhost rabb ...

  4. opencv_java import org.opencv.highgui.Highgui，类中无imread方法

    opencv_java import org.opencv.highgui.Highgui,提示错误 2018年01月19日 14:50:25 小码农的路程 阅读数:358   原因:1.OpenCV ...

  5. C++ 智能指针五

    /* 代码分析: 这是标准库的源码,我们看到在enable_shared_from_this内部保存了一个weak_ptr.shared_from_this函数就是通过这个weak_ptr得到了. 但 ...

  6. Angular4学习笔记（九）- 生命周期钩子简介

    简介 Angular 指令的生命周期,它是用来记录指令从创建.应用及销毁的过程.Angular 提供了一系列与指令生命周期相关的钩子,便于我们监控指令生命周期的变化,并执行相关的操作.Angular ...

  7. Scala学习笔记（四）：apply方法说明

    当scala中类或者对象有一个主要用途的时候,apply方法就是一个很好地语法糖.请看下面一个简单的例子: class Foo(foo: String) {} object Foo { def app ...

  8. 仿迅雷播放器教程 -- C++ 100款开源界面库 (10)

      (声明:Alberl以后说到开源库,一般都是指著名的.或者不著名但维护至少3年以上的.那些把代码一扔就没下文的,Alberl不称之为开源库,只称为开源代码.这里并不是贬低,像Alberl前面那个系 ...

  9. 【SQLSERVER】How to check current pool size

    SELECT des.program_name , des.login_name , des.host_name , COUNT(des.session_id) [Connections] FROM ...

  10. centos7设置时间和时区

    1.安装ntp服务软件包:yum install ntp 2.将ntp设置为缺省启动:systemctl enable ntpd 3.修改启动参数,增加-g -x参数,允许ntp服务在系统时间误差较大 ...