<!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. Centos 6.4 安装erlang&rabbitmq

    1. 安装 erlang 1.1 准备工作,先安装依赖库 yum -y install make gcc gcc-c++ kernel-devel m4 ncurses-devel openssl-d ...

  2. CMake结合PCL库学习（3）

    CMake常用指令结合PCL 的顶层CMake文件的解释 基本指令 (1)ADD_DEFINITIONS 向 C/C++编译器添加-D 定义,比如:ADD_DEFINITIONS(-DENABLE_D ...

  3. WebRTC 零基础开发者教程（中文版）下载

    WebRTC 简介 WebRTC,是一个支持网页浏览器进行实时语音通话或视频聊天的技术,是谷歌2010年以6820万美元收购Global IP Solutions公司而获得的一项技术. WebRTC提 ...

  4. linux下用/proc/stat文件来计算cpu的利用率-c语言实现

    proc文件系统介绍 /proc文件系统是一个伪文件系统,它只存在内存当中,而不占用外存空间.它以文件系统的方式为内核与进程提供通信的接口.用户和应用程序可以通过/proc得到系统的信息,并可以改变内 ...

  5. ubuntu之视频转换（Avconv的使用）

    1.安装 sudo apt-get install ffmpeg libav-tools 2.基本操作 avconv [options] [[infile options] -i infile] [[ ...

  6. 【转】在xcode5中修改整个项目名

    本文转载自:http://www.cnblogs.com/tbfirstone/p/3601541.html 总会遇到几个项目,在做到一半的时候被要求改项目名,网上找了下相关的资料,大多数是xcode ...

  7. 正确释放WORD对象(COM组件) COMException: 被调用的对象已与其客户端断开连接

    本来form method=post本页面 修改为其他页面 action=save.aspx后没问题 其他问题可参考以下: 引自:http://topic.csdn.net/u/20090108/17 ...

  8. swoole 定时器

    timer.php <?php //创建websocket服务器对象,监听0.0.0.0:9502端口 $ws = ); swoole_timer_tick(, function ($timer ...

  9. VMware Workstation11安装Mac OS X 10.10虚拟机

    原文:http://jingyan.baidu.com/article/3f16e003eac66e2591c103e0.html 优化:http://www.cnblogs.com/yipu/p/4 ...

  10. windows cmd命令显示UTF8设置

    windows cmd命令显示UTF8设置   在中文Windows系统中,如果一个文本文件是UTF-8编码的,那么在CMD.exe命令行窗口(所谓的DOS窗口)中不能正确显示文件中的内容.在默认情况 ...