<!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. 也谈谈规范JS代码的几个注意点

    也谈谈规范JS代码的几个注意点 写JS代码差不多也有两年了吧,从刚开始的“初生牛犊不怕虎”乱写一通到后来也慢慢知道去规范一下自己写的代码.这种感觉就像是代码是你的作品,你希望它保持一份不仅干净而且也优 ...

  2. UIScroView 3倍的contentSize，左右Scroll时，懒惰加载View

    UIScroView 3倍的contentSize,左右Scroll时,懒惰添加左右的View 用途:分段加载数据 定义枚举: typedefenum { ViewPositionLeft = , V ...

  3. Python入门1

    简介 Python的创始人为Guido van Rossum.1989年圣诞节期间,在阿姆斯特丹,Guido为了打发圣诞节的无趣,决心开发一个新的脚本解释程序,做为ABC 语言的一种继承.Python ...

  4. Struts2实现简单的在线人数统计

    用Strust2框架的知识简单实现一个统计在线人数的问题. 1 搭建开发环境:(配置文件,jar包等问题) 2 index.jsp <%@ page language="java&qu ...

  5. 使用springMVC实现文件上传和下载之文件下载

    接上一篇,文件下载需要获取下载文件的存储路径,这里只是手动填入,如果是在具体项目中,可以把文件名和上传后的存储路径保存在数据库中.然后增加一个文件列表的页面展示文件名和文件路径,然后点击下载的时候把相 ...

  6. [Mongodb]3.2版本的一些基本操作--待续

    一.缘由 今天公司测试股票交易系统,需要拉取大量的数据存放,故考虑放在mongodb里. 二.一些基本操作 1.权限管理 mongo默认是不用账号就能登陆的,默认端口27017,但是这不太安全.我们要 ...

  7. Oracle时间戳 与时间之间的相互转换

    Unix时间戳记是从'1970-01-01 00:00:00'GMT开始的秒数,表现为整数型. Oracle中的时间是Date型,以下函数提供了两种时间转换的Oracle函数 (1)从Unix时间戳记 ...

  8. CyclicBarrier类合唱演绎

    package a.jery; import java.util.concurrent.CyclicBarrier; import java.util.concurrent.ExecutorServi ...

  9. ctags+cscope

    a opensource study website http://www.lanedo.com/2013/the-hidden-pearls-of-tracker-2/ http://www.lan ...

  10. python __init__.py用途

    转自http://www.cnpythoner.com/post/2.html Python中的Module是比较重要的概念.常见的情况是,事先写好一个.py文 件,在另一个文件中需要import时, ...