精华内容
下载资源
问答
  • 下面小编就为大家分享一篇vue阻止click事件冒泡,防止触发另一个事件方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • @click.stop="openTeamAchievementMonth(scope.row.id)
    @click.stop="openTeamAchievementMonth(scope.row.id)"

     

    展开全文
  • vue 阻止事件冒泡,捕获方法

    千次阅读 2019-09-23 16:56:03
    要想了解 VUE 阻止事件冒泡和捕获方法,首先要了解一下 JS 事件和 JS 阻止事件冒泡,捕获方法 1. js 事件的三阶段 捕获阶段 目标阶段:执行当前对象的事件处理程序 冒泡阶段 2. js 阻止事件冒泡,捕获 阻止事件...

    要想了解 VUE 阻止事件冒泡和捕获方法,首先要了解一下 JS 事件和 JS 阻止事件冒泡,捕获方法

    1. js 事件的三阶段

    • 捕获阶段
    • 目标阶段:执行当前对象的事件处理程序
    • 冒泡阶段

    2. js 阻止事件冒泡,捕获

    • 阻止事件冒泡: event.stopPropagation()event.cancelBubble = true (IE)
    • 阻止浏览器默认行为: event.preventDefault()

    3. vue 阻止事件冒泡,捕获

    • @click.stop : 阻止事件冒泡
    • @click.prevent : 阻止事件默认行为
    • @click.self : 事件只作用在元素本身,而不是其子元素
    <a @click.stop="doThis">阻止单击事件继续传播</a>
    <form @submit.prevent="onSubmit">提交事件不再重载页面</form>
    <a @click.stop.prevent="doThat">修饰符可以串联</a>
    <div @click.self="doThat">只当在 event.target 是当前元素自身时触发处理函数.即事件不是从内部元素触发的</div>
    
    

    补充其他修饰符

    • @click.capture : 使用事件捕获模式
    • @click.once : 事件只触发一次 2.1.4新增
    • @scroll.passive : 告诉浏览器这个事件的默认行为不会被取消 2.3.0新增
    • @keyup.enter : 按键修饰符,enter被按下的时候触发
    • @click.ctrl : 系统修饰符,Ctrl 被按下的时候触发 2.1.0新增
    • @click.ctrl.exact : 有且只有 Ctrl 被按下的时候才触发 2.5.0新增
    <div @click.capture="doThis">添加事件监听器时使用事件捕获模式,即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理</div>
    <a @click.once="doThis">点击事件将只会触发一次</a>
    <div @scroll.passive="onScroll">scroll事件不会取消默认的滚动行为</div>
    <input @keyup.13="submit" placeholder="只有在 keyCode 是 13 时调用 vm.submit()">
    <button @click.ctrl="onClick">即使 Alt 或 Shift 被一同按下时也会触发</button>
    <button @click.ctrl.exact="onCtrlClick">有且只有 Ctrl 被按下的时候才触发</button>
    <button @click.exact="onClick">没有任何系统修饰符被按下的时候才触发</button>
    
    

    使用修饰符时,顺序很重要,相应的代码会以同样的顺序产生。
    例如:用 @click.prevent.self 会阻止所有的点击,而 @click.self.prevent 只会阻止元素上的点击。

    我的个人博客有空来坐坐

    https://www.wangyanan.online

    展开全文
  • vue阻止事件冒泡

    万次阅读 2019-08-19 23:10:47
    再实际开发过程中我遇到了一个问题: 问题描述: 大致就是一个商品列表,点击里面的每条商品记录就能...绑定了一个change事件,这时候就会出现一个问题就是,每当我点击步进器对商品数量进行修改的时候,就会触发...

    再实际开发过程中我遇到了一个问题:

    问题描述:

        大致就是一个商品列表,点击里面的每条商品记录就能进入对应商品详情页,点击每条记录里面的步进器就可以对商品的数量进行修改,我给外层的DOM节点绑定了一个点击事件,用来触发跳转进入商品详情页的动作,步进器我用的是Vant UI的一个组件,绑定了一个change事件,这时候就会出现一个问题就是,每当我点击步进器对商品数量进行修改的时候,就会触发我绑定在外层父DOM节点的点击事件。

    DOM结构大概如下:

    解决方法:

      开始我尝试在步进器中绑定的change事件后面加.stop事件修饰符,但是发现并没有什么作用,最后解决办法是在步进器的父级元素绑定了一个空的点击事件并添加stop事件修饰符(如上图所示)。

    相关知识点:

    1.事件冒泡: (事件按照从最特定的事件目标到最不特定的事件)

         当事件在某一DOM元素被触发时,例如用户在客户名字节点上点击鼠标,事件将跟随着该节点继承自的各个父节点冒泡穿过整个的DOM节点层次,直到它遇到依附有该事件类型处理器的节点,此时,该事件是onclick事件。在冒泡过程中的任何时候都可以终止事件的冒泡,在遵从W3C标准的浏览器里可以通过调用事件对象上的stopPropagation()方法,在Internet Explorer里可以通过设置事件对象的cancelBubble属性为true。如果不停止事件的传播,事件将一直通过DOM冒泡直至到达文档根。

    阻止事件冒泡的方法:

    (1)W3C的方法:e.stopPropagation();

    (2)IE:e.cancelBubble=true;

    function stopBubble(e){
     if(e && e.stopPropagation){
        e.stopPropagation;
     }else{
        window.event.cancelBubble;
     }
    }

     

    2.Vue.js 为 v-on 提供了 事件修饰符:

    • .stop
    • .prevent
    • .capture
    • .self
    • .once
    展开全文
  • 下面小编就为大家分享一篇vue监听滚动事件 实现某元素吸顶或者固定位置显示方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 本篇文章主要介绍了详解vue事件对象、冒泡阻止默认行为,这里整理了详细的代码,有需要的小伙伴可以参考下。
  • 下面小编就为大家分享一篇vue绑定的点击事件阻止冒泡的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue阻止事件冒泡的两种方式

    千次阅读 2019-10-09 22:15:13
    1.阻止事件冒泡方式1 如下有父子标签的点击事件 在子类中调用stopPropagation()方法即可禁止事件的传递 boxClick:function () { alert("父标签被点击"); }, subClick:function (event) { event.stopPro...

    1.阻止事件冒泡方式1

    如下有父子标签的点击事件
    在子类中调用stopPropagation()方法即可禁止事件的传递

    boxClick:function () {
                    alert("父标签被点击");
                },
                subClick:function (event) {
                    event.stopPropagation();
                    alert("子标签被点击了");
                }
    

    2.阻止事件冒泡方式2

    直接在对应标签的事件后面加上stop即可

    <div class="box" @click="boxClick()">
            <div class="subClass" @click.stop="subClick($event)"></div>
        </div>
    
    展开全文
  • vue阻止事件冒泡的两种方法

    万次阅读 2017-06-01 11:33:57
    vue阻止事件冒泡的2种方法
  • vue阻止事件冒泡

    2021-09-06 16:24:05
    vue阻止事件冒泡 问题描述: 使用的element-ui的dialog对话框,在对话框的父组件还有点击事件,点击dialog对话框时也会相应外部父组件的点击事件。 <el-dialog title="提示" :visible.sync="dialogVisible" ...
  • vue 阻止冒泡事件方法

    千次阅读 2019-06-19 21:19:45
    if(event) { //vue 组织冒泡事件 event ->$event event.stopPropagation ? event.stopPropagation(): event.cancelBubble = true; } console.log(JSON.stringify(item)); }, } }); ...
  • vue点击事件如何阻止事件冒泡以及取消默认事件

    万次阅读 多人点赞 2019-06-09 15:27:49
    vue中,一般情况下我们是这样绑定事件方法的: <div class="parent-wrapper" @click="clickWrapper">点这里</div> @click=“事件名”,这是常规方法,但是如果需要阻止事件冒泡的话,可以在click...
  • vue 阻止事件冒泡和捕获 @click.stop : 阻止事件冒泡 @click.prevent : 阻止事件默认行为 @click.self : 事件只作用在元素本身,而不是其子元素
  • vue 阻止事件冒泡

    2018-12-12 14:23:55
    事件修饰符 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的...为了解决这个问题, Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。 ...
  • vue阻止冒泡事件

    千次阅读 2020-05-12 11:00:52
    vue冒泡事件 事件冒泡是指发生在子元素身上的事件,会冒泡至父元素身上。如我们在子元素身上点击后,也会触发父元素的点击事件,若不及时阻止,该事件还会一级一级冒上去。事件冒泡这个行为是默认存在的,故需要我们...
  • vue阻止冒泡: <div @click.stop='demoFun'></div> react阻止冒泡:(懒得写了,直接上其他人的) https://zhuanlan.zhihu.com/p/26742034 jquery阻...
  • 1、事件冒泡:不再派发事件方法: event.stopPropagation() ...<button data-aid='123' @click="eventFn($event)">事件对象</button>...终止事件在传播过程的捕获、目标...该方法将停止事件的传播,阻止它被
  • JS、VUE 阻止事件冒泡、捕获方法 这篇文章觉得不错,转载:他人博客
  • Vue checkBox阻止事件冒泡

    千次阅读 2020-11-24 09:58:49
    在此处checkbox使用@change绑定事件(@click和@change的区别后边再学习),阻止checkbox的点击事件向下层collapse传递,使用@click.stop.native @click.stop.native="()=>{}" <el-col :span="AI
  • vue阻止change事件冒泡

    2021-11-19 02:54:43
    <span @click.stop> <el-switch v-model="_item.status" active-color="#409EFF" inactive-color="#eeeeee" :active-value="0" :inactive-value="1" @change="handleChangeFun(_item.id, _item)" ...
  • 当父子元素中都有点击事件的时候,为了让触发子元素中的事件时,不去触发父元素中的事件,可以在子元素事件中添加stop来阻止事件冒泡。 如图,在button的点击事件中加上stop,触发addStatus的时候,就不会去触发父...
  • vue中提供 @touchmove.prevent 方法可以完美解决这个问题 ”dialog”> 如果不是使用Vue的话,可以给body添加overflow:hidden属性解决 补充知识:vue项目中禁止页面滚动 / 滚动事件穿透 (弹出蒙版时,弹出层下面还...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,419
精华内容 4,567
关键字:

vue阻止事件冒泡的方法

vue 订阅