<!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. [转]SQLServer2008日志文件无法收缩处理方法

    问题描述     发现有的数据库日志文件太大,无论如何收缩执行几次SQL语句都不行.事务日志达30+G,而且使用常规的截断.收缩方法均无法减小日志物理文件的尺寸,经过一番寻找,终于找到了解决方法. 查 ...

  2. 21副GIF动图让你了解各种数学概念

    baidu 21副GIF动图让你了解各种数学概念

  3. HTML5能取代IOS原生应用吗

    介绍 移动应用程序(App)和HTML5都是目前最火的技术,二者之间也有不少重叠之处.在移动设备浏览器里运行的html5的web页面,也可以重新打包成不同平台上运行的app.目前很多浏览器都有很好的跨 ...

  4. 本地和VMware虚拟主机之间的网络访问

    在需要设置的虚拟主机节点上右键,点击[设置...] 在打开的虚拟机设置中,选中[网络适配器],之后在右边设置网络连接为[自定义:指定的虚拟网络] 然后设置同一网关即可.

  5. linux net command /uboot command

    1. uboot command 读取寄存器内容 md [内存地址][长度] 修改内存地址 mw [内存地址][长度] 2. linux络命令  -- netstat -a (all)显示所有选项,默 ...

  6. 企业架构（Enterprise Architecture）

    ylbtech-Miscellaneos: 企业架构(Enterprise Architecture) A,返回顶部 1, 简称EA.是指对企业事业信息管理系统中具有体系的.普遍性的问题而提供的通用解 ...

  7. PHP判断访问终端，电脑或手机访问

    函数代码: //判断电脑或手机访问 function is_mobile(){ $user_agent = $_SERVER['HTTP_USER_AGENT']; $mobile_agents = ...

  8. Python filter,map,lambda,reduce,列表解析

    filter用法 filter(func,seq) 将seq的元素逐一代入func,通过func的返回值来判断是保留还是过滤 >>> def foo(x): return x> ...

  9. Android Service 文档

    应用场景: 1  用于将后台逻辑(Service中)和UI逻辑(Activity中)进行解耦,实现Service功能的复用,为其他程序提供功能. 2  后台功能,由于Activity在进入后台时(On ...

  10. SQLite页缓冲区管理

    页面管理器是访问本地数据库文件和日志文件的唯一模块(通过操作系统API).但是它不对数据库的内容做解析,也不对数据库内容做修改(但是页管理器会对文件头信息部分内容做修改).它把随机访问系统或面向字节的 ...