Event事件学习实用路线（6）——Event事件之阻止事件冒泡

最新推荐文章于 2024-01-17 10:29:19 发布
最新推荐文章于 2024-01-17 10:29:19 发布
阅读量410 收藏
点赞数
分类专栏： # JS——Event事件 原生JavaScript Web前端 文章标签： javascript 前端 js event html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013946061/article/details/105748525
版权

Event事件之阻止事件冒泡



阻止事件冒泡


mouseover 和 mouseout事件


<!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">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background: red;
            margin: 100px auto;
        }
        p{
            width: 100px;
            height: 100px;
            background: blue;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
    <script>
        var div=document.querySelector('div');

        div.addEventListener('mouseover',function(){
            console.log('移入了')
        })

        div.addEventListener('mouseout',function(){
            console.log('移出了')
        })       
    </script>
</body>
</html>

我们发现从div移入其子元素p标签，还会打印“移出了”，再打印“移入了”，再将其移入div，还会打印“移出了”，再打印“移入了”。
在这里插入图片描述
结论：如果鼠标移入或者移出 子元素 范围 ，mouseover 和 mouseout 会触发~

mouseenter和 mouseleave事件


<!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">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background: red;
            margin: 100px auto;
        }
        p{
            width: 100px;
            height: 100px;
            background: blue;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
    <script>
        var div=document.querySelector('div');

        div.addEventListener('mouseenter',function(){
            console.log('移入了')
        })

        div.addEventListener('mouseleave',function(){
            console.log('移出了')
        })
    </script>
</body>
</html>

我们发现从div移入其子元素p标签，就没有任何反应了。
在这里插入图片描述
结论：mouseenter 和 mouseleave 不受 子级元素范围干扰~

取消冒泡


有的需求可能需要执行元素本身的事件，不需要执行父级身上的事件。这个时候就需要我们取消冒泡事件了。

<!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">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background: red;
            margin: 100px auto;
        }
        p{
            width: 100px;
            height: 100px;
            background: blue;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
    <script>
        var div=document.querySelector('div');
        var p=document.querySelector('p');

        div.addEventListener('click',function(){
            alert('div')
        })

        p.addEventListener('click',function(e){
            alert('p')
        })
    </script>
</body>
</html>

假设我们需要点击p标签的时候，只需要显示打印“p”的对话框怎么整？
在这里插入图片描述


### cancelBubble --- 
        var div=document.querySelector('div');
        var p=document.querySelector('p');

        div.addEventListener('click',function(){
            alert('div')
        })

        p.addEventListener('click',function(e){
            // 取消事件冒泡
            e.cancelBubble = true;
            alert('p')
        })

要实现点击哪个，就去执行哪个标签的对应事件：
在这里插入图片描述

stopPropagation


        var div=document.querySelector('div');
        var p=document.querySelector('p');

        div.addEventListener('click',function(){
            alert('div')
        })

        p.addEventListener('click',function(e){
            // 取消事件冒泡
            e.stopPropagation()
            alert('p')
        })

在这里插入图片描述

cancelBubble和stopPropagation的区别：


cancelBubble：这是ie最早之前支持的方法，后期的时候谷歌和火狐才支持它了，原本它其实不在标准规范里，它兼容性非常好支持ie老版本，如果仅考虑兼容性可以使用它。



stopPropagation：这是标准W3C标准，建议在现代的浏览器使用。



（后续待补充）
溜_x_i_a_o_迪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript Event学习第八章 事件的顺序
12-13
代码如下: ———————————– | element1 | | ————————- | | |element2 | | | ————————- | ———————————– 这两个元素都有onclick事件处理程序。如果用户在element2上面单击那么...
JQurey入门——事件机制之事件中的冒泡现象示例解释
12-11
本文将深入探讨事件机制中的一个重要概念——冒泡现象，并通过一个具体的jQuery示例来阐述这一现象。 首先，事件驱动的概念是网页开发的基础。当用户浏览页面时，浏览器会解析HTML和CSS，执行JavaScript，这一过程...
vue中阻止click事件冒泡,防止触发另一个事件的方法
12-28
使用vue阻止子级元素的click事件冒泡，很简单，用stop <div click=test1()> <span click.stop=test2()>按钮1</span> <span>按钮2</span> </div> 这样点击div里面的按钮1，就不会触发div绑定时间test1()方法。 以上这篇vue中阻止click事件冒泡,防止触发另一个事件的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
阻止事件冒泡的两种方法
热门推荐
zhm0303的博客
09-25 1万+
何为冒泡：       即事件开始是由最具体的元素接收，然后逐层向上级传播到较为不具体的元素。 加入一个button和它的父级div同时定义了onclick事件，点击button时，在触发了button的onclick事件之后，会发生事件冒泡，然后触发div的onclick事件，然而，触发button的onclick事件的同时也触发div的onclick事件显然不是我们想要的，此时，可以阻止冒...
vue 阻止事件冒泡的方法
qq_31683775的博客
11-02 207
@click.stop="openTeamAchievementMonth(scope.row.id)"
Vue阻止事件冒泡的两种方式
雨天的麦子的博客
10-09 6102
1.阻止事件冒泡方式1 如下有父子标签的点击事件 在子类中调用stopPropagation()方法即可禁止事件的传递 boxClick:function () { alert("父标签被点击"); }, subClick:function (event) { event.stopPro...
vue--点击事件阻止冒泡的方法
weixin_46820017的博客
10-31 6959
vue—click点击事件的冒泡行为 **1. click.stop就是外层包内层，内层写了.stop不会触发到外层的，只触发内层 .prevent就是阻止默认跳转链接，比如写了一个百度链接，没有 prevent会默认跳转到百度网页，写了这个prevent就会阻止自动跳转行为 .capture就是外层包内层，外层写了capture行为，只会触发外层，而内层是先触发外层，再触发内层 .self就是外层包内层，内层包按钮事件，内层写了.self行为，外层只会触发外层，内层先触发内层，再外层，点击按钮事件，先
微信小程序bindtap事件与冒泡阻止详解
11-30
在微信小程序中，`bindtap`是一个非常关键的...事件冒泡是事件传播的一种机制，而`catchtap`可以用来阻止事件冒泡，确保事件仅在特定组件范围内处理。理解并熟练运用这些概念，对于构建交互丰富的微信小程序至关重要。
JavaScript每天必学之事件
11-24
其实这篇文章挺早之前就写了，但是由于sf保存...事件流指的是页面中接收事件的顺序，IE，火狐和chrome浏览器都是事件冒泡，所谓是事件冒泡指的是事件最开始由最具体的元素接收，然后逐级向上传播到不具体的节点。而事
Vue 阻止事件冒泡
最新发布
PB瓦工
01-17 2343
【代码】Vue 阻止事件冒泡。
js事件event事件,阻止冒泡
giveMe_Five的博客
02-12 987
1.做弹窗事件 , 点击空白区域关闭弹窗 阻止点击按钮向上冒泡 点击事件时  $("#choice").on('touchstart',function(e){ console.log(e) e.stopPropagation();//阻止事件向上冒泡 但是不会阻止自身的点击事件 $(".tiaojian").show(); }) 弹...
JS中不能冒泡的mouseenter，和mouseleave却冒泡了，而且一冒就停不下来
js中的递归问题
12-11 1885
今天练习用原生JS写物体运动的时候，发现一个事情，那就一直大家认为的不能冒泡的mouseenter，和mouseleave，冒泡了，而且一冒就停不下来。先上代码 &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html lang=&amp;quot;en&amp;quot;&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;am
鼠标mouse事件冒泡处理
baoaoba9317的博客
01-22 199
简单的鼠标移动事件： 进入 mouseenter：不冒泡 mouseover: 冒泡 不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件 只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件 移出 mouseleave: 不冒泡 mouseout：冒泡 不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件...
事件冒泡阻止event.stopPropagation()
weixin_34010949的博客
05-19 137
package {    import flash.display.*;    import flash.events.*;    import flash.text.*;     public class EventBubble extends Sprite    {        private var msgTxt:TextField;        public var msg_txt:...
mouseover、mouseout事件引起的阻止事件冒泡失效
bluelotos893的博客
10-28 3202
这两天在写一个类似京东商品目录导航时遇到了一个问题，给外层父盒子绑定了mouseover、mouseout事件，但是我不想让它里面的子元素触发，于是使用了常规的event.stopPropagation();及return false来阻止冒泡，但是都不起作用，看了一些关于JQ的hover方法与mouseenter、mouseleave、mousemove、mouseover、mouseout 之间
阻止鼠标点击默认事件与冒泡
hello__word__的博客
08-24 583
阻止鼠标点击默认事件与冒泡 e.preventDefault(); e.stopPropagation();
事件冒泡,捕获,阻止行为.
蔷薇夜月的博客
10-14 366
 一、事件的发生顺序 这个问题的起源非常简单，假设你在一个元素中又嵌套了另一个元素 复制代码 代码如下: ----------------------------------- | element1                        | |   -------------------------     | |   |element2             
js事件冒泡机制，以及如何阻止冒泡
林中明月间丶
05-11 1580
事件冒泡：当一个元素接收到事件的时候，会把他接受到的所有传播给他的父级； 一直到 window 为事件冒泡（该发生还是会发生） js阻止冒泡:当前要阻止冒泡的事件函数中调用 。必须要同一个事件才行。例如：mousedown,不能用onclick 浏览器的默认行为:右键、按住左键选中、a标签是html默认点击事件，取消：<a href="javascript:;"></a&g...
Prophesee事件相机技术与未来机器学习
“prophesee公司在CVPR2019 workshop上分享了关于事件相机（Event-based Camera）的资料，涵盖了传感器的发展历程、技术特点以及机器学习在事件相机中的应用。” 事件相机，又称为Event-based Camera，是一种新型的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值