快速了解4种阻止事件冒泡的方法(原生js阻止,vue中使用修饰符阻止)

这篇具有很好参考价值的文章主要介绍了快速了解4种阻止事件冒泡的方法(原生js阻止,vue中使用修饰符阻止)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

阻止事件冒泡的方法

前端结构

<div id="app">
    <div class="father-box" @click="clickFatherBox">
        我是父盒子
        <div class="son-box" @click="clickSonBox">
          我是子盒子
        </div>
    </div>
</div>
 methods: {
        clickSonBox(){
          alert("子盒子")
        },
        clickFatherBox(){
          alert("父盒子")
        }
},

事件冒泡:clickSonBox事件发生时clickFatherBox事件也被触发了

此时点击子盒子 对话框弹出两次

方法1:使用js阻止事件冒泡
clickSonBox(e){
    e.stopPropagation();
    alert("子盒子")
},
       
    //或者
    
clickSonBox(e){
     e.cancelBubble=true
     alert("子盒子")
   },
方法2:使用事件修饰符stop

绑定事件时,使用stop修饰符阻止事件冒泡

<div class="father-box" @click="clickFatherBox">我是父盒子
    <div class="son-box" @click.stop="clickSonBox">
      我是子盒子
    </div>
</div>
方法3:使用事件修饰符self

绑定事件时,使用self修饰符 表示只在本元素被点击时触发

<div class="father-box" @click.self="clickFatherBox">
     我是父盒子
     <div class="son-box" @click="clickSonBox">
       我是子盒子
     </div>
 </div>
注意:

self修饰符应该在父盒子绑定事件时使用而不是子盒子! 在父盒子事件使用self,点击了子盒子,父盒子的点击事件不会被触发,即事件没有冒泡,

self表示只在当前元素发生事件时,事件才触发文章来源地址https://www.toymoban.com/news/detail-589488.html

到了这里,关于快速了解4种阻止事件冒泡的方法(原生js阻止,vue中使用修饰符阻止)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序阻止事件冒泡【看这里】

    微信小程序阻止事件冒泡 将子类的点击事件 bindtap 写成 catchtap bindtap :子元素使用bindtap绑定事件后,执行的时候,会冒泡到父元素(触发父元素上绑定的bingtap事件) catchtap :不会冒泡到父元素上,阻止事件冒泡 uniapp阻止事件冒泡 将子类的点击事件 @click 写成 @click.stop 利用

    2024年02月11日
    浏览(44)
  • uniapp微信小程序中阻止事件冒泡

    开发场景:列表中展示地块的数据信息,用户可以点击列表进入地块的详情界面,也可以点击列表中的星星按钮进行收藏 遇到的问题:每次点击星星的时候,都会触发父级的点击事件,从而进入到详情界面 原本的代码: 我原本想到可以使用 @click.stop 用来阻止时间冒泡,但是

    2024年02月02日
    浏览(48)
  • uni-app——如何阻止事件冒泡

    在开发移动应用程序时,我们经常需要处理用户交互事件。然而,有时候这些事件会冒泡,导致意外的行为和不良用户体验。在本文中,我们将探讨如何使用UniApp框架来阻止事件冒泡,并提供一些示例代码来帮助您理解如何实现这一功能。 1. 什么是事件冒泡? 在开始讨论如

    2024年02月08日
    浏览(50)
  • 在微信小程序中怎样阻止冒泡事件?

    在微信小程序当中,当两个包含的视图都使用了bindtap函数来绑定点击事件的话,就会发生冒泡事件(即点击内部事件时将同时触发外部事件),如果我们要想阻止冒泡事件的发生,将被包含在内部的bindtap该为catchtap即可,下面请看具体事例。 如下图所示,红色框子部分绑定

    2024年02月11日
    浏览(50)
  • 原生js实现网页淘宝产品展示效果,鼠标移入小图展示对应大图(事件委托、事件传播、冒泡机制)【含完整代码】

    淘宝网页产品展示模块如下: 当鼠标移入小图,在上方会相应地展示大图 当鼠标移入小图,在上方会相应地展示大图;且当鼠标移出,图片停留在移入时显示的图片,不会改变。 本文实现效果如下(鼠标移入即改变,不用点击): 定义图片列表,为列表添加鼠标移入事件

    2024年02月07日
    浏览(42)
  • uniapp开发微信小程序阻止事件冒泡

        最近在使用uniapp去开发微信小程序     其中不乏遇到一些问题,我都会发出来。     万一自己别的时候忘记,但是需要用了。   uniapp中开发微信小程序,当使用  @click.stop     去阻止事件冒泡的时候 会发现, @click.stop  并没有生效,就很神奇 问题如图: 解决问题方案

    2024年02月12日
    浏览(53)
  • react antd阻止Checkbox事件冒泡(折叠面板标题中增加复选框,阻止点击复选框折叠面板展开/折叠)

    背景 折叠面板Collapse标题中增加复选框,点击复选框,会触发折叠面板的展开和折叠。 我们希望勾选复选框的时候,不能影响到折叠面板的展开和折叠。 最开始使用 onChange 自带的event来阻止事件冒泡,这种方式是无效的,代码如下: 解决 监听复选框的 onClick 事件,用 e.st

    2024年02月11日
    浏览(57)
  • uniapp中u-switch子组件点击触发到父组件(阻止事件冒泡)

    解决方法:在u-switch 外面包一个view标签,并使用@tap.stop.prevent 可以阻止事件冒泡 .stop 阻止事件继续传播到父元素,prevent阻止事件默认行为 知识点补充: 1.事件冒泡:当一个元素的事件被触发时,会沿着父元素向上传递,直到根元素 2. 阻止事件冒泡常用的事件修饰符: .st

    2024年01月21日
    浏览(60)
  • JS事件冒泡与JS事件代理(事件委托)

    通俗来讲,当触发(点击或者触摸之类的做法)有父元素的子元素的时候,事件会从事件源(被点击的子元素)开始逐级向上传播,触发父级元素的点击事件,一直会传到window。如果在某一层想要中止冒泡,使用 event.stopPropagation() 。下面见详细的代码: 我们可以发现,当点

    2024年02月09日
    浏览(49)
  • Vue+element table+原生js +touch触摸事件实现移动端横向拖动

    Vue+element table+原生js +touch触摸事件实现移动端横向拖动 今天做移动端项目时,想加个表格展示数据,但是调试的时候发现,表格数据很多时,想要触屏左右滑动内容,但是滑动不了,又不想引用插件实现,只好自己写个拖拽事件了

    2024年02月17日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包