<!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反编译工具（Java Decompiler）

    1,下载地址,包括GUI,Eclipse插件 http://jd.benow.ca/ 2,Eclipse插件的安装参看 https://blog.csdn.net/yh_zeng2/article/d ...

  2. 【转】搭建Java版WebService

    原文地址:http://www.cnblogs.com/jasoncc/archive/2011/12/22/2296052.html Hi,大家好! 今天主要和大家分享,如何搭建一个Web服务,做A ...

  3. Go指南练习_切片

    源地址 https://tour.go-zh.org/moretypes/18 一.练习题描述 实现 Pic.它应当返回一个长度为 dy 的切片,其中每个元素是一个长度为 dx,元素类型为 uint8 ...

  4. Hdg Remote Debug

    https://www.assetstore.unity3d.com/en/#!/content/61863 https://forum.unity.com/threads/hdg-remote-de ...

  5. win8 下 TortoiseSVN 不显示图标

    如果你安装 TortoiseSVN 之后,功能使用正常,但是文件夹或文件左上角就是不显示图标,那么你可能 1. 64bit 系统上装了 32bit 的 TortoiseSVN 解决方法是,再安装 64 ...

  6. 设计模式，python延迟计算缓存模式

    之前已经发过单独的缓存,这也算一种模式. from __future__ import print_function import functools class lazy_property(obje ...

  7. jdk 自带的数据库Derby使用

    ij是derby自带的一个功能强大的数据库管理工具,可以进行很多数据库管理的操作,包括创建数据库, 启动/关闭数据库,执行SQL脚本等.完成准备工作后,就可以启动并使用ij工具了. 在cmd中输入如下 ...

  8. oracle 学习笔记（2）创建表空间及用户授权

    原文:http://www.cnblogs.com/smartvessel/archive/2009/07/06/1517690.html Oracle安装完后,其中有一个缺省的数据库,除了这个缺省的 ...

  9. 不可思议的颜色混合模式 mix-blend-mode （转）

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  10. vs2017更新后web项目部分后台代码类没有颜色，也没有自动提示输入功能

    vs2017有的版本更新后默认.net framework框架是.net framework4.6.1,将项目的.net framework框架更改为4.6.1,颜色和自动提示出现