VUE中如何实现阻止事件冒泡

目录
  • 如何阻止事件冒泡
    • 科普
  • 阻止click事件冒泡(防止触发另一个事件)的方法
    • 方法一
    • 方法二

如何阻止事件冒泡

当父子元素中都有点击事件的时候，为了让触发子元素中的事件时，不去触发父元素中的事件，可以在子元素事件中添加stop来阻止事件冒泡。

如图，在button的点击事件中加上stop，触发addStatus的时候，就不会去触发父元素中的showColorStatus事件。

科普

  • .stop 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件
  • .prevent 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交
  • .self 是只有是自己触发的自己才会执行,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号
  • .capture 是改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式
  • .once 是将事件设置为只执行一次,如 .click.prevent.once 代表只阻止事件的默认行为一次,当第二次触发的时候事件本身的行为会执行
  • .passive 滚动事件的默认行为 (即滚动行为) 将会立即触发，而不会等待 onScroll 完成。这个 .passive 修饰符尤其能够提升移动端的性能。

阻止click事件冒泡(防止触发另一个事件)的方法

方法一

使用vue阻止子级元素的click事件冒泡。简单得：可以直接用stop

<div @click="test1()">    
    <span @click.stop="test2()">按钮1</span>    
    <span>按钮2</span> 
</div>

这样点击div里面的按钮1，就不会触发div绑定时间test1()方法。

方法二

可以自己写个阻止冒泡事件 然后在发生冒泡的元素中调用这个事件

@click="_stopPropagation($event)"

methods：{      
    _stopPropagation(ev){      
        var _this = this;      
        ev.stopPropagation();      
    },
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决VUE框架 导致绑定事件的阻止冒泡失效问题

    前面遇到了一个问题就是VUE框架内部做了一些处理,使得在我们通过v-for渲染DOM的时候添加新元素的时候,绑定事件也能对新增的元素有效. 而这次遇到的问题则是,原本绑定事件中(该函数没有写在vue实例的methods中),导致阻止冒泡事件失效了.无论是return false 还是event.stopPropagation();都无效. 此时需要通过用VUE提供了事件修饰符来处理,比如阻止事件冒泡@click.stop='xx()' .stop .prevent .capture .self

  • vue绑定的点击事件阻止冒泡的实例

    当我们在使用vue做项目时,经常用到点击事件的绑定,但是我们绑在一个div上,里面的其他按钮(如删除.修改)等按钮也会加载这儿div的点击事件,而事实我们不需要,如何解决: 首先我们来区分事件冒泡.事件捕获是什么 (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 6.0: div -> body -> html -> document Mozilla 1.0: div -> body -> html -> doc

  • 重新认识vue之事件阻止冒泡的实现

    冒泡的表现 近期用vue做了一个需求,大概是同一个区域,点击不同位置有不同的响应函数,还有个总的响应函数,好吧,如下图所示: 他们的DOM结构如下: <div v-for="(item, index) in listData" @click="handleClick3"> <el-col :span="grid"> <div @click="handleClick1"></div>

  • VUE中如何实现阻止事件冒泡

    VUE中如何实现阻止事件冒泡

    目录 如何阻止事件冒泡 科普 阻止click事件冒泡(防止触发另一个事件)的方法 方法一 方法二 如何阻止事件冒泡 当父子元素中都有点击事件的时候,为了让触发子元素中的事件时,不去触发父元素中的事件,可以在子元素事件中添加stop来阻止事件冒泡. 如图,在button的点击事件中加上stop,触发addStatus的时候,就不会去触发父元素中的showColorStatus事件. 科普 .stop 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件 .pre

  • 在点击div中的p时，如何阻止事件冒泡

    今天整理笔记,发现在学习javaScript的过程中,遇到过一个在当时看来很棘手的问题,现在特地总结一下,也希望能帮助到曾像我一样迷惘的初学者. 我还是以一个案例来说明问题,html代码如下: <div onclick="show('a')"> <p onclick="show('b')"></p> </div> css代码如下: div{ width:500px; height:500px; background:r

  • React中阻止事件冒泡的问题详析

    前言 最近在研究react.redux等,网上找了很久都没有完整的答案,索性自己整理下,这篇文章就来给大家介绍了关于React阻止事件冒泡的相关内容,下面话不多说了,来一起看看详细的介绍吧 在正式开始前,先来看看 JS 中事件的触发与事件处理器的执行. JS 中事件的监听与处理 事件捕获与冒泡 DOM 事件会先后经历 捕获 与 冒泡 两个阶段.捕获即事件沿着 DOM 树由上往下传递,到达触发事件的元素后,开始由下往上冒泡. IE9 及之前的版本只支持冒泡 |  A  --------------

  • JQuery中阻止事件冒泡几种方式及其区别介绍

    JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); 复制代码 代码如下: $("#div1").mousedown(function(event){ event.stopPropagation(); }); 方式二:return false; 复制代码 代码如下: $("#div1").mousedown(function(event){ return false; }); 但是这两种方式是有区别的.return

  • jquery 事件冒泡的介绍以及如何阻止事件冒泡

    什么是JS事件冒泡? 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window). 如何来阻止Jquery事件冒泡? 通过一个小例子来解释 复制代码 代码如下: <%@PageLanguage="C#&q

  • js阻止冒泡及jquery阻止事件冒泡示例介绍

    js阻止冒泡 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容. 复制代码 代码如下: function stopPro(evt){ var e = evt || window.event; //returnValue如果设置了该属性,它的值比事件句柄的返回值优先级高.把这个属性设置为 fasle, //可以取消发生事件的源元素的默认动作. //window.event?e.returnValue = false:e.preventDefault(); window.ev

  • JS阻止事件冒泡行为和闭包的方法

    阻止事件冒泡行为,要是不阻止的话,点击div的时候也会同时触发body事件 html代码 <body onclick='load()'> <div onclick='cli()'> click this </div> </body> css代码 div{ width:200px; height:200px; border:1px red solid; } js代码 function load(){ console.log('body') } function

  • javascript阻止事件冒泡和浏览器的默认行为

    1.阻止事件冒泡,使成为捕获型事件触发机制. function stopBubble(e) { //如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的stopPropagation()方法 e.stopPropagation(); else //否则,我们需要使用IE的方式来取消事件冒泡 window.event.cancelBubble = true; } 2.当按键后,不希望按键继续传递给如HTML文本框对象时

  • Jquery阻止事件冒泡 event.stopPropagation

    描述: 防止事件冒泡到DOM树上,也就是不触发的任何前辈元素上的事件处理函数. version added: 1.0event.stopPropagation() 我们可以用 event.isPropagationStopped() 来确定这个方法是否(在那个事件对象上)调用过了. 这个方法对 trigger() 来自定义的事件同样有效. 注意,这不会阻止同一个元素上的其它事件处理函数的运行. Additional Notes: 自从.live()方法处理事件一旦传播到文档的顶部,live事件是

  • 利用JQuery阻止事件冒泡

    利用JQuery阻止事件冒泡

    冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 我们在平时的开发过程中,肯定会遇到在一个div(这个div可以是元素)包裹一个div的情况,但是呢,在这两个div上都添加了事件,如果点击里面的div我们希望处理这个div的事件,但是呢,我们不希望外层的div的事件也执行,这时候我们就要用到阻止冒泡. 通俗点来说吧,你在家里看电视,躲在自己的小房间,但是你不希望声音传到隔壁父母的耳朵里,这时候,你可能躲在被窝里,或者墙壁的隔音效果很好,阻隔声音可以理解为阻止冒泡. <style>

随机推荐