js 取消事件冒泡
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 取消事件冒泡的更多相关文章
- JS——取消事件冒泡,实现div的显示与隐藏 event.cancelBubble = true;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- vue.js阻止事件冒泡和默认事件
首先我们来看原生JS取消事件冒泡方法: e.stopPropagation(); //非IE浏览器window.event.cancelBubble = true; //IE浏览器 原生JS阻止默认事 ...
- 原声js,取消事件冒泡,点击按钮,显示box,点击屏幕其他地方,box隐藏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery 取消事件冒泡 阻止后续内容执行 闭包函数 (学习笔记)
1.取消事件冒泡 <title>取消事件冒泡</title> <style> div { border:solid 1px black; } </style& ...
- js 停止事件冒泡 阻止浏览器的默认行为(阻止超连接 # )
在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...
- jquery取消事件冒泡的三种方法展示
jquery取消事件冒泡的三种方法展示 html代码 <!doctype html> <html> <head> <meta charset="ut ...
- 学习javaScript必知必会(4)~事件、事件绑定、取消事件冒泡、事件对象
1.常用的事件: ① onload:页面加载 ② onblur: 失去焦点 onfocus: 获取焦点 ③ onclick:点击 ④ onmouseover:鼠标经过 onmouseout:鼠标离开 ...
- js 阻止事件冒泡
function stopBubble(e) { //如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的st ...
- 浅谈js的事件冒泡机制
很多人都听说过,js的事件冒泡机制,其实,这个说法还是比较生动形象的,就是一个水泡在水底下,冒泡到水面的过程. 那js的事件冒泡机制呢,就是一个DOM树,一级一级向上冒的过程,最终是到document ...
随机推荐
- Android学习Scroller(五)——具体解释Scroller调用过程以及View的重绘
PS: 该篇博客已经deprecated,不再维护.详情请參见 站在源代码的肩膀上全解Scroller工作机制 http://blog.csdn.net/lfdfhl/article/detail ...
- SQL查询无限层级结构的所有下级,所有上级
无限层级结构的table1表,Id(主键),ParentId(父级id)查询某个Id的所有下级或所有上级,使用WITH AS,UNION ALL 查询 1.查询Id为1所有的下级 WITH T AS( ...
- xgboost原理
出处http://blog.csdn.net/a819825294 1.序 距离上一次编辑将近10个月,幸得爱可可老师(微博)推荐,访问量陡增.最近毕业论文与xgboost相关,于是重新写一下这篇文章 ...
- 11.13git和redis
2018-11-13 15:46:40 git完结 redis完结, 还剩一点路飞项目!!!做完回学校!!!! 越努力,越幸运!永远不要高估自己! 关于 redis具体使用可以参考: http://w ...
- 小程序 将图片文字变成一整张图片海报(判断其中字符串宽度可通过计算字符串.length*字符宽度)
//test.xml<canvas bindtap='showhaibao' canvas-id="myCanvas" style="width:{{canvasw ...
- 【Swing程序设计/常用面板】
面板也是一个Swing容器,可以作为容器容纳其他组件,但是它必须要被添加到其他容器中.Swing常见的面板是JPanel面板和JScrollPanel面板. JPanel面板可以聚集一些组件来布局. ...
- 我也来----xia bi bi 一下----微信小程序
工作刚到一阶段 就看了看微信小程序 自己做了个小dome 主要是为了让我女朋友能够学习做菜! 然而悲催的发现我根本没有App ID 不说快了 直接上图 个人感觉开发起来还是很简单的. 对着AP ...
- 强制不使用“兼容性视图”的HTML代码
转自:http://www.weste.net/2013/8-9/93109.html 在IE8浏览器以后版本,都有一个"兼容性视图",让不少新技术无法使用.那么如何禁止浏览器自动 ...
- from appium import webdriver 使用python爬虫,批量爬取抖音app视频(requests+Fiddler+appium)
使用python爬虫,批量爬取抖音app视频(requests+Fiddler+appium) - 北平吴彦祖 - 博客园 https://www.cnblogs.com/stevenshushu/p ...
- java8新特性--Stream的基本介绍和使用
什么是Stream? Stream是一个来自数据源的元素队列并可以进行聚合操作. 数据源:流的来源. 可以是集合,数组,I/O channel, 产生器generator 等 聚合操作:类似SQL语句 ...