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 ...
随机推荐
- 提高MySQL数据库的安全性
1. 更改默认端口(默认3306) 可以从一定程度上防止端口扫描工具的扫描 2. 删除掉test数据库 drop database test; 3. 密码改的复杂些 # 1 set password ...
- 使用Lifecycle管理Tomcat中组件的生命周期
大型软件和汽车制造工厂一样,组件繁多,关系复杂,相互协同完成了汽车的生产过程.软件中的Object就像是工厂中component一样. 下面来看看相关的类和接口: abstract class Lif ...
- sshfs远程挂载
一.什么是 SSHFSSSHFS(Secure SHell FileSystem)是一个客户端,可以让我们通过 SSH 文件传输协议(SFTP)挂载远程的文件系统并且在本地机器上和远程的目录和文件进行 ...
- Spring-Boot 访问Controller时报错可能会是这个坑
报错信息: 代码: @Controller("/index") public class IndexController extends BaseController{ @GetM ...
- 时间选择器(timepicker)
可以使用Slider拖动选择,也可以使用timespinner改变时间,或者手工填写. 自动判断位置 效果: 源码: <!DOCTYPE html> <html xmlns=&quo ...
- lower_bound && upper_bound
用lower_bound进行二分查找 ●在从小到大排好序的基本类型数组上进行二分查找. 这是二分查找的一种版本,试图在已排序的[first,last)中寻找元素value.如果[first,last ...
- mybatis mapper-locations作用
application上配置了@MapperScan(扫面mapper类的路径)和pom.xml中放行了mapper.xml后,配置mapper-locations没有意义 查找后得知,如果mappe ...
- [Day10]继承、抽象类
1.继承:在一个现有类的基础上去构建一个新的类,构建出来的新类被称为子类,现有类被称作父类,子类会自动拥有父类所有可继承的属性和方法. 2.继承的格式 : class 子类 extends 父类{} ...
- [Day6]引用数据类型、ArrayList 集合
1.类的定义与使用 (1)类的定义格式 创建java文件,与类名相同 public class 类名{ 数据类型 属性名称1: 数据类型 属性名称2: … } (2)使用格式 导包:我们将所有的类 ...
- Java之事务的基本应用
基本介绍 事务是数据一致性最基本的保证,也就是说一个事务中的操作要么都成功,要么都失败,不允许部分成功.我们常说的事务就是jdbc事务,当然Java中还有其他事务,并且在使用jdbc事务有很多注意点, ...