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. iOS - UITableView中有两种重用Cell的方法

    UITableView中有两种重用Cell的方法: - (id)dequeueReusableCellWithIdentifier:(NSString *)identifier; - (id)dequ ...

  2. 开发环境使用docker 快速启动 单机 RocketMq

    镜像说明 https://cr.console.aliyun.com/?spm=5176.2020520001.1001.8.kpaxIC&accounttraceid=176ddc4e-62 ...

  3. Android学习:代码控制UI界面示例

    package allegro.test2; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; im ...

  4. tcp的粘包和拆包示例以及使用LengthFieldFrameDecoder来解决的方法

    粘包和拆包是什么? TCP协议是一种字节流协议,没有记录边界,我们在接收消息的时候,不能人为接收到的数据包就是一个整包消息 当客户端向服务器端发送多个消息数据的时候,TCP协议可能将多个消息数据合并成 ...

  5. Spring AOP @AspectJ进阶

    @AspectJ可以使用切点函数定义切点,我们还可以使用逻辑运算符对切点进行复核运算得到复合的切点,为了在切面中重用切点,我们还可以对切点进行命名,以便在其他的地方引用定义过的切点.当一个连接点匹配多 ...

  6. linux基础操作1

    date #查看日期cal #查看当月日历cal 2017 #查看某年全年的日历whoami #查看当前登录的用户 #修改网卡,可以上网的步骤vi /etc/sysconfig/network-scr ...

  7. js中的值类型和引用类型的区别

    1.JavaScript中的变量类型有哪些? (1)值类型(基本类型):字符串(String).数值(Number).布尔值(Boolean).Undefined.Null  (这5种基本数据类型是按 ...

  8. css 背景图片虚化效果

    转载地址:http://blog.csdn.net/ohehehou/article/details/51975539 需求:一个div设置了background: url,现在需要使图片背景模糊,d ...

  9. mysql sql注入getshell新姿势

     sql.php?sql=1'报错信息为:1064:You have an error in your SQL syntax; check the manual that corresponds to ...

  10. 17.vue移动端项目二

    FilmList.vue 电影列表 <template> <div class="mz-film-list"> <!-- 正在热映 https://m ...