<!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. pyenv BUILD FAILED解决方法

    在本机mac上安装pyenv安装成功后,用pyenv来安装python 3.5.0又出现了如下的问题: -> pyenv install 3.5.0 Downloading Python-3.5 ...

  2. Win10共享打印机所需要的设置（无需密码访问实现打印机共享,共享不要密码）

    原文:https://m.baidu.com/from=1086k/bd_page_type=1/ssid=0/uid=0/pu=usm@0,sz@1320_1002,ta@iphone_2_5.1_ ...

  3. No service of type Factory<LoggingManagerInternal> available in ProjectScopeService

    导入GitHub上下载的项目时报错 No service of type Factory<LoggingManagerInternal> available in ProjectScope ...

  4. Java 8 StampedLock解决同步问题

    Java 8新特性探究(十)StampedLock将是解决同步问题的新宠 JDK8中StampedLock原理探究 深入理解StampedLock及其实现原理 JDK1.8 StampedLock源码 ...

  5. govendor使用

    一,开发端 前提是有一个已经go get过依赖包,并编译成功的项目. $ go get -u github.com/kardianos/govendor $ cd project_dir $ gove ...

  6. windows下添加多个git仓库账号

    当使用git方式下载时,如果没有配置过ssh key,会提示错误(git clone支持https和git(即ssh)两种方式下载源码) 当需要在机器上使用不同的git账户,这就需要知道如何在机器上添 ...

  7. Tensorflow读写TFRecords文件

    在使用slim之类的tensorflow自带框架的时候一般默认的数据格式就是TFRecords,在训练的时候使用TFRecords中数据的流程如下:使用input pipeline读取tfrecord ...

  8. [1]朝花夕拾-JAVA类的执行顺序

    最近在温习java的基础,刷题刷到java的执行顺序,很汗颜,答案回答错了! 题目类似如下: package com.phpdragon.study.base; public class ExecOr ...

  9. TSPL学习笔记(2):过程和变量绑定

    变量的引用 语法: variable 返回: variable的值 如果在某个范围内存在对某个标识符的变量绑定,那么当这个标识符以表达式的形式出现的时候被认为是其所绑定变量的值. 在引用一个标识符的时 ...

  10. DownloadProvider源码解析——与Volley对比

    1.AndroidHttpClient的创建 DownloadManager: 在DownloadThread的run方法里 public void run() { Process.setThread ...