阻止冒泡的方法 event.stopPropagation();

最新推荐文章于 2022-05-26 16:14:09 发布
最新推荐文章于 2022-05-26 16:14:09 发布
阅读量845 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/waterDjj/article/details/52224518
版权
标准浏览器 和  ie浏览器  
 w3c的方法是event.stopPropagation()       
 IE则是使用event.cancelBubble = true       bubble   冒泡  泡泡       cancel 取消 
 兼容的写法： 
 if(event && event.stopPropagation)
        {
             event.stopPropagation();  //  w3c 标准
        }
          else
          {

              event.cancelBubble = true;  // ie 678  ie浏览器8  

}

例子一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="btn">按钮</button>
</body>
<script>

        var btn=document.getElementsByTagName("button")[0];
        document.οnclick=function(){
            alert("点击空白");
        }
    btn.οnclick=function(event){
        alert("点击button");
        //阻止冒泡
        event.stopPropagation();
    }
    window.οnclick=function(){
        alert("点击window");
    }


</script>
</html>

例子二 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
            border: 0px;
        }
        #bg{
            width: 100%;
            height:100%;
            opacity: 0.5;
            background-color: #333;
            position: fixed;
            top:0;
            display: none;
        }
        #show{
            width: 300px;
            height: 300px;
            background-color: white;
            position: relative;
            top:20%;
            left: 40%;
            display: none;

        }

    </style>
</head>
<body>
<a href="#">登录</a>
<a href="#">注册</a>
<div id="bg"></div>
<div id="show"></div>
</body>
<script>
  var mya=document.getElementsByTagName("a")[0];
  var bg=document.getElementById("bg");
  var show=document.getElementById("show");
    mya.onclick = function(event){
        bg.style.display="block";
        show.style.display="block";
        event.stopPropagation();
    }
    document.οnclick=function(event){
      var target=event.target.id;
        alert(target);
        if(target!="show"){
            bg.style.display="none";
            show.style.display="none";
        }
    }
</script>
</html>

 }

waterDjj
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp - 解决报错Error in von handler:“ TypeError: $event.stopPropagation is not a function“，阻止点击事件冒泡导致错
高级前端工程师
07-15 2397
uni-app，安卓app，苹果app，微信小程序，移动端，H5网页，手机网站，微信小程序、支付宝小程序，手机app端，nvue，报错，冒泡，点击穿透，阻止点击事件冒泡，[Vue warnl: Error in von handler:" TypeError: $event.stopPropagation is not a function"，阻止失败，无法解决这个问题，外侧套一层还是报错，依旧出错，详细解决方案，如何解决这个问题，@click.stop，点击组件时不向下传递点击事件，只触发自身的点击事件，
javascript阻止事件冒泡的一种方法
03-25
一种解决事件冒泡的方法，有较好的浏览器兼容性，具体思路参见文档： http://blog.csdn.net/ivyandrich/article/details/22041933
JQuery中阻止事件冒泡方式及其区别
热门推荐
JeamKing的专栏
02-27 29万+
JQuery 提供了两种方式来阻止事件冒泡。方式一：event.stopPropagation();        $("#div1").mousedown(function(event){            event.stopPropagation();        });方式二：return false;        $("#div1").mousedown(
js阻止事件冒泡的DEMO
zb3352689的专栏
05-02 298
http://www.w3.org/TR/html4/loose.dtd"> js阻止事件冒泡的DEMO  //阻止冒泡的方法  function stopPP(e)  {   var evt = e || window.event;   //IE用cancelBubble=true来阻止而FF下需要用stopPropagation方法   evt.stopPropa
阻止冒泡的方法
一笑的博客
10-19 303
标准浏览器 event.stopPropagation(); ie678 event.cancelBubble = true; 代码如下：if(event && event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble =true; }
阻止事件冒泡方法
weixin_57157220的博客
07-09 1万+
阻止事件冒泡方法 1.event.stopPropagation()方法 这是阻止事件的冒泡方法，不止事件向document上蔓延，但是默认事件任然会执行，当你调用这个方法的时候，如果点击一个连接，这个连接仍然会被打开 2.event.preventDefault()方法 这是阻止默认事件的方法，调用此方法时，链接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素 3.return false; 这个方法比较暴力，他会同时阻止事件冒泡也会阻止默认事件，不仅阻止了事件往上冒泡，而且阻止了事件本身
阻止冒泡 e.stopPropagation();
GoodLuck_wu5的博客
04-28 362
事件冒泡的案例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-...
冒泡事件阻止的案例 e.stopPropagation()
brucehongsen的博客
05-06 467
案例： 效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> &lt
Jquery阻止事件冒泡 event.stopPropagation
10-28
`event.stopPropagation()`是jQuery提供的一个方法，用于阻止事件继续在DOM树中向上冒泡。当你调用这个方法时，它会防止当前事件处理函数触发任何在其祖先元素上的事件处理程序。 `event.stopPropagation()`的使用...
关于event.cancelBubble和event.stopPropagation()的区别介绍
09-05
但在 Firefox 3.6.4 中，`event.cancelBubble` 虽然返回 `true`，但并未真正阻止冒泡。 另一方面，`event.stopPropagation()` 是 W3C 标准的事件模型中定义的方法，它在所有现代浏览器（包括 Firefox、Chrome 和 ...
js事件冒泡及其阻止方法
01-08
js事件冒泡 概念：事件冒泡（event bubbling），即事件开始时由最具体的元素（文档中嵌套层次最深 的那个节点）接收，然后逐级向上传播。也就是说我点击子元素，如果父级元素也有监听点击事件，也会被触发到。 事件冒泡 .par { width: 200px; height: 200px; background-color: antiquewhite; } .child { width: 50px; height:
js阻止事件冒泡的方法
ld395353765的博客
12-06 523
一、冒泡事件简介 当我们点击一个控件的时候，如果包括这个控件的父控件也有click事件，则会继续执行。 方法一：event.stopPropagation( ); 例如： &lt;div&gt;     &lt;p&gt;段落文本内容         &lt;input type="button" value="点击" /&gt;     &lt;/p&gt; &lt;/div&g
阻止冒泡的其他的方法和注意事项
蚁族的奋斗的博客
05-16 217
1. input 阻止的只是input事件，但是click事件还是会冒泡 2. 另外的阻止冒泡的方法，例如在父级显示事件为空
阻止冒泡相关的三种方法
hu441805796的博客
05-08 1891
1.event.stopPropagation(); 事件处理过程中，阻止了事件冒泡，但不会阻击默认行为2.return false; 事件处理过程中，阻止了事件冒泡，也阻止了默认行为还有一种有冒泡有关的： 3.event.preventDefault(); 它的作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为
EVENT事件-------阻止冒泡+阻止默认
m0_51272779的博客
05-26 230
EVENT事件-------阻止冒泡+阻止默认
js中的event.stopPropagation()阻止冒泡用法和event.preventDefault()用法
qq_40407998的博客
09-09 811
event.preventDefault()的作用是阻止一些默认的行为，比如点击链接不会跳到对应的地址； var link = document.getElementById('myLink'); link.onclick = function(event){ event.preventDefault(); } event.stopPropagation()的作用是阻止事件冒泡； var btn = document.getElementById('myBtn'); document.onclic
event事件对象(应用案例，比如阻止冒泡)
程宇寒
12-10 503
event事件对象(应用案例，比如阻止冒泡) &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;演示event事件对象(应用案例，比如阻止冒泡)-雪豹软件工作室&lt;/title&gt; &lt;link rel="stylesheet&qu
如何阻止事件冒泡
庸人方自扰，自在就好
01-27 1万+
1、事件处理过程中，阻止了事件冒泡，但不会阻止默认行为（执行超链接的跳转）2、事件处理过程中，阻止了事件冒泡，也阻止了默认行为（不执行超链接的跳转）3、事件处理过程中，不阻止事件冒泡，但阻止默认行为（父元素以上全部会触发该事件，但不执行超链接跳转）
echarts中使用event.stopPropagation()
最新发布
05-27
2. 在事件处理函数中，使用`event.stopPropagation()`方法阻止事件冒泡，例如： ``` option = { ... series: [{ type: 'bar', data: [10, 20, 30, 40, 50], onclick: function (params, event) { console....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值