<!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. 你所不了解的setTimeout

    看到了一篇不错的文章<你会用setTimeout吗 >,转载过来的,改了个名字,一下子感觉搞大上了,嘎嘎. 加了几个关于 setTimeout 和setInterval的小知识: 关于se ...

  2. spring mvc 4数据校验 validator

    注解式控制器的数据验证.类型转换及格式化——跟着开涛学SpringMVC http://jinnianshilongnian.iteye.com/blog/1733708Spring4新特性——集成B ...

  3. 【MySQL】优化—工欲善其事,必先利其器之EXPLAIN

    接触MySQL已经有一段时间了,了解如何优化它也迫在眉睫了,话说工欲善其事,必先利其器.最近我就打算了解下几个优化MySQL中经常用到的工具.今天就简单介绍下EXPLAIN. 环境准备 Explain ...

  4. [zz] Pixar’s OpenSubdiv V2: A detailed look

    http://www.fxguide.com/featured/pixars-opensubdiv-v2-a-detailed-look/ Pixar’s OpenSubdiv V2: A detai ...

  5. hpp头文件与h头文件的区别

    hpp,其实质就是将.cpp的实现代码混入.h头文件当中,定义与实现都包含在同一文件,则该类的调用者只需要include该hpp文件即可,无需再将cpp加入到project中进行编译.而实现代码将直接 ...

  6. [踏得网]HTML5在线教程阅读进度记录

    2017年1月3日18:12:19http://techbrood.com/h5b2a?p=html-canvas-states 2017年1月3日17:10:11http://techbrood.c ...

  7. 一、Owin Identity的使用

    参照http://www.cnblogs.com/r01cn/p/5177708.html教程. 注意点: 1.Nuget包分别下载Microsoft.AspNet.Identity(Owin必须), ...

  8. AX 2012 SSRS print setting-报表打印输出设置

    static void callerreport_printsetting(Args _args) { LedgerJournalController controller = new LedgerJ ...

  9. JAVA设计模式之解释器模式

    在阎宏博士的<JAVA与模式>一书中开头是这样描述解释器(Interpreter)模式的: 解释器模式是类的行为模式.给定一个语言之后,解释器模式可以定义出其文法的一种表示,并同时提供一个 ...

  10. Vs打包工程 错误: Unable to update the dependencies of the project (转)

    Setup Project 错误: Unable to update the dependencies of the project 在VS2010中编译包含安装工程的解决方案提示错误:Unable ...