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 ...
随机推荐
- 用 wait-notify 写一段代码来解决生产者-消费者问题
在同步块中调用 wait() 和 notify()方法,如果阻塞,通过循环来测试等待条件.请参考答案中的示例代码. [生产者] import java.util.Vector; import java ...
- MISCONF Redis is configured to save RDB snapshots, but it is currently not able to persist on disk. Commands that may modify the data set are disabled, because this instance is configured to report e
早上来到公司,线上的项目报错: Error in execution; nested exception is io.lettuce.core.RedisCommandExecutionExcepti ...
- Cocoapods 创建自己的公开库、私有库
如何创建自己的共有库 1.注册Trunk trunk需要CocoaPods 0.33版本以上,用pod --version 命令查看版本 CocoaPods版本 如果版本低,需要升级: sudo ge ...
- Spring 对事务管理的支持
1.Spring对事务管理的支持 Spring为事务管理提供了一致的编程模板,在高层次建立了统一的事务抽象.也就是说,不管选择Spring JDBC.Hibernate .JPA 还是iBatis,S ...
- asp.net mvc 路由检测工具
初学mvc,路由搞不清楚,可以通过一款插件 查看匹配的路由. 工具名<RouteDebugger> 可以在nuget中查询RouteDebugger后,安装.或者在控制台进行安装: pm& ...
- Nginx配置跨域请求 CORS
当出现403跨域错误的时候 No 'Access-Control-Allow-Origin' header is present on the requested resource,需要给Nginx服 ...
- Butterknife 导入项目配置
在app的 build.gradle 文件中添加 dependencies { // Butterknifeapi 'com.jakewharton:butterknife:8.6.0'annotat ...
- 关于Redis 应用 的一些 感悟
最近在项目中 使用了 Redis技术
- oracle 存储过程分页
将分页的存储过程封装到包中,包规范 create or replace package pkg_query as type cur_query is ref cursor; PROCEDURE prc ...
- Java进程与线程的区别
每个进程都独享一块内存空间,一个应用程序可以同时启动多个进程.比如浏览器,打开一个浏览器就相当于启动了一个进程. 线程指进程中的一个执行流程,一个进程可以包含多个线程. 每个进程都需要操作系统为其分配 ...