<!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. Java知多少（32）instanceof

    多态性带来了一个问题,就是如何判断一个变量所实际引用的对象的类型 . C++使用runtime-type information(RTTI),Java 使用 instanceof 操作符. insta ...

  2. 【转】svn:is not under version control and is not part of the commit, yet its child解决办法

    来自:http://blog.csdn.net/lufeng20/article/details/7641093 在把写好的代码提交到svn上面时,遇到了一个错误如下: svn: Commit fai ...

  3. Linux软件源

    Kali科大软件源: vim /etc/apt/sources.list 下面的粘帖进去. deb http://mirrors.ustc.edu.cn/kali kali main non-free ...

  4. centos7系统下安装php-fpm并配置nginx支持并开启网站gzip压缩

    注:此处不介绍nginx的安装.以下教程默认已安装nginx. 1. yum install -y php-fpm yum install php-pdo yum install php-mysql ...

  5. centos7 网络配置

    vi /etc/sysconfig/network-scripts/ifcfg-ens33 TYPE=Ethernet PROXY_METHOD=none BROWSER_ONLY=no BOOTPR ...

  6. python中将图片从客户端(client)推到(POST)到服务器端(server)的方法

    从客户端推json到服务器端的工作可以用flask很容易做到,那么需要推送图片的话可以先将图片存到json中再进行操作. 服务器端 from flask import request, Flask i ...

  7. SpringBoot------Maven Install报错

    报错信息: Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin::compile (default-compil ...

  8. chrome设置捕获异常时自动暂停js

    1. [F12 | 右键审查元素] 打开chrome调试工具 2. 进行如下设置 a. 点击Pause on exceptions b. 选中Pasue On Caught Exceptions 设置 ...

  9. sencha touch 免费培训视频

    之前的收费视频现在免费了 sencha touch版本:2.3.1 第一期:https://pan.baidu.com/s/1kUK4OFP 第二期:https://pan.baidu.com/s/1 ...

  10. 微信小游戏的本地缓存和清除的使用 (text.js image.js file-util.js)

    参考: 微信小游戏,文件系统 UpdateManager-小游戏 一.Egret提供的本地缓存工具类( 备注:新版本进行了修改,并增加了sound.js等) 在微信小游戏项目中,Egret提供了fil ...