<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
</head>
<body>
    <input type="button" id="btn1" value="点击">
    <div id="div1" style="width: 200px; height: 200px; display: none;"></div>
    <script>
        window.onload=function(){
            var oBtn=document.getElementById('btn1');
            var oDiv=document.getElementById('div1');
            oBtn.onclick=function(eve){
                var oEvent=eve||event;    //处理ie和火狐的兼容性问题
                oDiv.style.display='block';
                alert('按钮点击了');
                oEvent.cancelBubble=true;    //阻止冒泡
            }
            document.onclick=function(){
                alert('冒泡');
            }
        }
    </script>
</body>
</html>

javascript 的事件--阻止冒泡的更多相关文章

  1. 重新认识vue之事件阻止冒泡

    冒泡的表现 近期用vue做了一个需求,大概是同一个区域,点击不同位置有不同的响应函数,还有个总的响应函数,好吧,如下图所示: 他们的DOM结构如下: <div v-for="(item ...

  2. JS事件阻止冒泡的写法

    $("body").on("click", "#id", function (ev) { ev = ev || event;要写的逻辑代码 ...

  3. html如何点击子元素事件而不触发父元素的点击事件——阻止冒泡

    如果子元素和父元素都有点击事件,会出现点击事件冒泡的情况. 1.如何避免冒泡: html: <html> <head></head> <body> &l ...

  4. angular 点击事件阻止冒泡及默认行为

    经常遇到场景:多层级元素绑定ng-click 事件,则底层元素的点击事件存在冒泡现象,怎么解决? 类似原生JS ,只是语法稍有不同,如下: 阻止冒泡 $event.stopPropagation() ...

  5. vue.js 自带阻止默认事件 阻止冒泡

    <!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a>   <!-- 提交事件不再重载页面  ...

  6. vue 点击事件阻止冒泡 用stop

    1.使用vue阻止子级元素的click事件冒泡,很简单,用stop.eg: @click.stop='xxx'

  7. js 事件阻止冒泡

    参考 https://www.cnblogs.com/zhuzhenwei918/p/6139880.html event.stopPropagation();

  8. 点击其它地方隐藏div／事件冒泡／sweet－alert阻止冒泡

    点击document时把div隐藏,但点击div时阻止点击事件冒泡到document,从而实现“点击文档其它地方隐藏div,点击div本身不隐藏”.js代码如下:$("#div") ...

  9. label 阻止冒泡 防止点击label 触发2次事件

    // 必须要把 jnput的外面的label加上事件阻止冒泡,否则点击label的时候,会冒泡到input上 再次触发input的点击事件 $('.xt_order_cleft_modb_rl_dx' ...

随机推荐

  1. 使用Apache Commons Configuration读取配置信息

    在项目中使用一些比较新的库总会给你带来很多快乐,在这篇文章中,我将会给你介绍一个在Java中读取配置文件的框架——Apache Commons Configuration framework. 你会了 ...

  2. JSR 303 - Bean Validation 介绍及最佳实践

    JSR 303 - Bean Validation 介绍及最佳实践 JSR 303 – Bean Validation 是一个数据验证的规范,2009 年 11 月确定最终方案.2009 年 12 月 ...

  3. putty连接ubuntu虚拟机缓慢问题的解决

    vmware安装系统使用了ubuntu,安装后每次用PUTTY登录发现都到等很久,经过上网搜索,发现是Ubuntu安全机制导致的连接缓慢问题,   解决方法如下;   1. sudo vim /etc ...

  4. [工具开发] keepalived使用nagios监控脚本

    最近在做开发和办公环境的高可用,采用的是keepalived:keepalived基于Linux内核支持的LVS,既能实现高可用,又能实现负载均衡,非常实用. keepalived监控服务状态时可以用 ...

  5. android.view.WindowLeaked

    08-30 13:17:05.645 25543-25543/com.tongyan.nanjing.subway E/WindowManager: android.view.WindowLeaked ...

  6. 黑马程序员_JAVA基础知识总结3

    ------- android培训.java培训.期待与您交流! ---------- Java源文件的扩展名是.java,编译之后生成.class的文件.所有的类都有一个共同的继承祖先Object类 ...

  7. RabbitMQ（一）

    官网:http://www.rabbitmq.com/ 一.什么是RabbitMQ(官方话)? 1.稳健的应用消息系统 2.容易使用 3.可以运行在主流操作系统上 4.支持大部分的开发平台(Java. ...

  8. 解决：新版火狐浏览器3d打不开

    重启:按 Ctrl + Shift + L 键唤出 3d 视图 参考文档:http://tieba.baidu.com/p/4606488108

  9. mac 使用技巧 （实时更新）

    一.部分快捷键. 这个在网上有一大堆,不过笔者认为,还是应该看个人习惯和使用环境吧.如果用得顺手,那就是快捷键,如果用得不顺手,那应该称其为“辅助键”吧. 下面介绍几个常用的快捷键: 1.截图. 屏幕 ...

  10. python函数递归和生成器

    一.什么是递归 如果函数包含了对其自身的调用,该函数就是递归的.递归做为一种算法在程序设计语言中广泛应用,它通常把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解,递归策略只需少量的 ...