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. [原]Docker-issue(1) image name 显示为 <none>

    问题:今天发现重新上传新的image的时候覆盖了原来的镜像后,REPOSITORY 就变为了 <none> ,如下图 解决办法: 使用tag重新命名image 问题解决:

  2. 使用AS-REP Roasting和kerberoasting攻击kerberos

    准备工作 ''' PowerView是PowerSploit框架的一个子集,里面继承了很多和渗透相关的powershell脚本下载地址:https://github.com/PowerShellMaf ...

  3. pandas 基础操作 更新

    创建一个Series,同时让pandas自动生成索引列 创建一个DataFrame数据框 查看数据 数据的简单统计 数据的排序 选择数据(类似于数据库中sql语句) 另外可以使用标签来选择 通过位置获 ...

  4. Bootstrap模态框原理分析及问题解决

    最近自学了bootstrap觉得里面模板样式挺好的,就想自己实现实现,不多说了,开始进入正题了 今天就来实现bootstrap里面的模态框弹出效果 首先很简单 实现一个类似于panel的modal 1 ...

  5. 百度Aip人脸识别之python代码

    用python来做人脸识别代码量少 思路清晰, 在使用之前我们需要在我们的配置的编译器中通过pip install baidu-aip  即可 from aip import AipFace 就可以开 ...

  6. 11.4vue(3)

    2018-11-4 20:57:28 越努力越幸运!永远不要高估自己!!!!! 要主动学习!!! 快把vue看完,进行路飞项目!明天整理一下vue知识点!

  7. B - Battle City bfs+优先队列

    来源poj2312 Many of us had played the game "Battle city" in our childhood, and some people ( ...

  8. 3D Slicer Reconstruct CT/MRI

    3D Slicer Reconstruct CT/MRI 1. Load DCM file of your CT/MRI 2. Go to Volume Rendering, click the ey ...

  9. 《JAVA编程思想》第四版 PDF

    感谢,参考:https://www.cnblogs.com/buwuliao/p/8073211.html 一.链接: 中文版: https://pan.baidu.com/s/1d07Kp4 密码: ...

  10. 严重: A child container failed during start的问题解决方法

    找到tomcat中的server.xml中的文件, 将图中阴影的部分注释掉,即可.