html部分

<input type="button" id="btn1" value="按钮" />
<div id="div1"></div>

css部分

<style type="text/css">
#div1{
width: 100px;
height:100px ;
background:#ccc ;
display:none ;
}
</style>

js部分

<script type="text/javascript">
window.onload=function(){
obtn1=document.getElementById('btn1');
odiv1=document.getElementById('div1');
obtn1.onclick=function(ev){
var oEvent=ev||event; //兼容IE跟非IE

oEvent.cancelBubble=true; //取消事件冒泡
odiv1.style.display='block';
}
document.onclick=function(){
odiv1.style.display='none';
}
}
</script>

js 取消事件冒泡的更多相关文章

  1. JS——取消事件冒泡,实现div的显示与隐藏 event.cancelBubble = true;

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. vue.js阻止事件冒泡和默认事件

    首先我们来看原生JS取消事件冒泡方法: e.stopPropagation(); //非IE浏览器window.event.cancelBubble = true; //IE浏览器 原生JS阻止默认事 ...

  3. 原声js,取消事件冒泡,点击按钮,显示box,点击屏幕其他地方,box隐藏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. jQuery 取消事件冒泡 阻止后续内容执行 闭包函数 (学习笔记)

    1.取消事件冒泡 <title>取消事件冒泡</title> <style> div { border:solid 1px black; } </style& ...

  5. js 停止事件冒泡 阻止浏览器的默认行为(阻止超连接 # )

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...

  6. jquery取消事件冒泡的三种方法展示

    jquery取消事件冒泡的三种方法展示 html代码 <!doctype html> <html> <head> <meta charset="ut ...

  7. 学习javaScript必知必会(4)~事件、事件绑定、取消事件冒泡、事件对象

    1.常用的事件: ① onload:页面加载 ② onblur: 失去焦点 onfocus: 获取焦点 ③ onclick:点击 ④ onmouseover:鼠标经过 onmouseout:鼠标离开 ...

  8. js 阻止事件冒泡

    function stopBubble(e) { //如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的st ...

  9. 浅谈js的事件冒泡机制

    很多人都听说过,js的事件冒泡机制,其实,这个说法还是比较生动形象的,就是一个水泡在水底下,冒泡到水面的过程. 那js的事件冒泡机制呢,就是一个DOM树,一级一级向上冒的过程,最终是到document ...

随机推荐

  1. u3d内嵌H5游戏 设置cookie

    Intent intent1 = getIntent(); Log.d("SS", "onCreate: "); String data = intent1.g ...

  2. Cookie的简单实用

    作用域: 一个域名下的所有网页共用一套cookie. 几个封装好的工具方法: // 添加一个cookie function setCookie(name, value, iDay) { var oDa ...

  3. svn中status为missing的文件的处理方式

    svn中status为missing的文件在每次commit时都会出现在待提交的列表里,而且它的上级文件夹前面有个红色的点,有碍观瞻,处理方式也很简单: 1.在待提交的列表里,右击该文件->de ...

  4. Kali Linux安装

    Kali Linux 安装过程参考:https://blog.csdn.net/qq_40950957/article/details/80468030 安装完成后,apt-get install 安 ...

  5. POJ - 3279(枚举+暴力)

    Fliptile Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 14297   Accepted: 5257 Descrip ...

  6. AttributeError: 'int' object has no attribute 'isdigit'(python下的isdigit函数)

    python下的isdigit函数:  isdigit() 方法检测字符串是否只由数字组成. 语法 isdigit()方法语法:  str.isdigit() 示例代码如下: 结果: 我想说的重点在于 ...

  7. vue引入第三方的js文件

    在最近开发中,遇到了vue框架配合openlayers做gis功能的一个模块.过程中要求引用第三方的单独js文件.嗯,解决如下: 把整体js文件用函数abc()封装起来,在需要用到的模块用var ob ...

  8. Docker数据卷

    1.volume操作命名:docker volume Usage:    docker volume COMMAND Manage Docker volumes Options:       --he ...

  9. Elasticsearch学习笔记(一)cat API

    一.Cat通用参数 Verbose GET /_cat/XXX/?v 开启详细输出 Help GET /_cat/XXX/?help 输出可用的列 Headers GET /_cat/XXX/?h=c ...

  10. 设备树..ing

    .dts==>.dtb ==>device_node ==>  platform_device ==> led_dev.c  ==>匹配 led_drv.c    (设备 ...