vue 事件修饰符 stop，capture，prevent

最新推荐文章于 2024-04-05 13:33:40 发布
最新推荐文章于 2024-04-05 13:33:40 发布
阅读量120 收藏 1
点赞数
文章标签： vue jquery event dom css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35516360/article/details/122066938
版权

原文链接: vue 事件修饰符 stop，capture，prevent

上一篇: 在 JavaScript 中 (a ==1 && a== 2 && a==3) 是否有可能为 true

下一篇: vue 自定义指令 directives

https://cn.vuejs.org/v2/guide/events.html

使用stop和capture  终止事件传递和捕获事件

事件冒泡由底向上 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>vue阻止事件冒泡</title>
    <script src="./vue.js" charset="utf-8"></script>
</head>

<body>
    <div id="app" @click="one">
        one
        <div @click="two">
            two
            <div @click="three">
                three
            </div>
        </div>
    </div>
</body>

<script>
    new Vue({
        el: "#app",
        methods: {
            one: function() {
                alert("one")
            },
            two: function() {
                alert("two")
            },
            three: function() {
                alert("three")
            }
        }
    })
</script>

</html>

点击three 会出现 三个弹窗

three，two，one

加入stop后只会出现three 即终止了事件的冒泡 

<div @click.stop="three">
                three
</div>

与使用event的事件函数起到的效果相同 

在微软的模型中，你必须设置事件的cancelBubble的属性为true
window.event.cancelBubble = true

在w3c模型中你必须调用事件的stopPropagation()方法
e.stopPropagation()

捕获事件由顶向下，使用capture 表示捕获事件 

    <div id="app" @click.capture="one">
        one
        <div @click="two">
            two
            <div @click.stop="three">
                three
            </div>
        </div>
    </div>

点击three，结果为one，three 

    <div id="app" @click.capture="one">
        one
        <div @click.capture="two">
            two
            <div @click.stop="three">
                three
            </div>
        </div>
    </div>

点击three  结果 为 one，two，three，

点击two结果为one，two

prevent阻止默认行为 

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

once 事件只触发一次 

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

阿豪boy
关注
【第三篇】Vue中的事件修饰符
波波烤鸭的博客
07-06 12万+
  本文我们来详细介绍下vue中的事件修饰符 Vue事件修饰符 事件修饰符概览 修饰符 说明 .stop 阻止冒泡 .prevent 阻止默认事件 .capture 添加事件侦听器时使用事件捕获模式 .self 只当事件在该元素本身(比如不是子元素)触发时触发回调 .once 事件只触发一次 事件修饰符具体介绍 .stop   .stop用来防止冒泡，我们先来看...
vue 事件修饰符（stop、 .capture 、.self、.prevent、.once）
weixin_40624809的博客
12-30 412
stop：阻止冒泡事件。即：放在谁上，就从谁开始不冒泡（放在被点击的元素身上，自身的点击事件会触发）。 capture：捕获触发机制。即：无论点击谁，先触发带有capture的。 self：自身不参与冒泡事件。即：冒泡事件照常进行，带有self的不参与。 prevent：阻止默认事件。 once：只触发一次事件。即：阻止默认事件，就阻止一次、div的click事件就只执行一次。 <!DOCTYPE html> <html> <head> <meta ch.
Vue事件修饰符_.stop .capture
weixin_38029864的博客
04-01 576
简介 Vue提供了事件绑定的语法糖。stop是阻止事件传递，capture是在捕获的过程监听，没有capture修饰符时都是默认冒泡过程监听。 冒泡与捕获 首先我们需要形成监听器的思想。在不使用任何框架的情况下，我们在js中通过addEventListener方法给Dom添加事件监听，这个方法直译就是添加事件监听器。 我们对Dom的操作事件会从最外面的祖先Dom逐步传递到目标Dom（捕获过程），然...
事件修饰符 .stop .capture .prevent .self .
weixin_43912756的博客
02-07 200
MVVM基本结构 <div id="app"> <div class="inner" @click="div1Handler"> <input type="button" value="点击" @click="btnHandler"> </div> </div> <script> ...
Vue 事件处理 -- 事件修饰符（prevent、stop、capture、self、once）
最新发布
libingjiedd的博客
04-05 1721
5.self：只有event.target是当前操作的元素时才触发事件；如果不使用Vue指令，那么怎么阻止事件冒泡呢？1.prevent：阻止默认事件（常用）；4.capture：使用事件的捕获模式；//阻止 vue 在启动时生成生产提示。3.once：事件只触发一次（常用）；-- 阻止默认事件（常用） -->2.stop：阻止事件冒泡（常用）；-- 引入Vue -->-- 准备好一个容器–>如果不加指令会怎么样？
vue事件修饰符 stop capture self prevent once @scrol.passive
wallace_yang的博客
01-14 158
vue事件修饰符 stop capture self prevent once @scrol.passive 1.事件冒泡 <div @click="fatherEvent"> 父元素 <div @click="sonEvent"> 子元素 </div> </div> 当点击子元素三个字时会发现先触发sonEvent函数，再触发fatherEvent函数，就叫做事件冒泡。 2.stop事件修饰符:阻止事件冒泡 <div @click="fat
修饰词：.prevent、.stop、.capture与.self
李振恒
01-04 349
修饰词：.prevent、.stop、.capture与.self Event.preventDefault: 可阻止时间执行其默认功能：例如： 阻止想submit这样子，本身带有功能的属性，使其本身功能失效！ 另一种失效的方法是return false，效果同上！ Event.stopPropagation: 允许事件的默认功能发生，但阻止事件传播 <div @click.prevent=...
vue事件修饰符和按键修饰符用法总结
12-03
3. `.capture`：此修饰符将事件监听器设置为在事件捕获阶段触发，而不是默认的冒泡阶段。 4. `.self`：只有当事件是在当前元素上触发时，事件处理函数才会执行。即使事件是从子元素冒泡上来的，只要不是直接在当前...
Vue事件处理器：事件绑定基础、事件修饰符：stop、prevent、capture、self、once；
YY的博客
11-21 575
Vue事件处理器：事件绑定基础、事件修饰符：stop、prevent、capture、self、once；
vue修饰符（.stop，.prevent，.capture）
weixin_47511748的博客
10-09 458
stop 是JS的一种机制，阻止事件冒泡机制事件冒泡：由于标签是嵌套的，触发内层标签事件的时候，同时也会触发外层标签的事件此时由于点击的span标签嵌套在div标签中，所以在触发span标签时，事件会发生冒泡，外层的div的事件也会被触发在有些情况下，不需要触发外层标签事件，就需要阻止内层标签冒泡，就可以使用.stop冒泡，让内层标签触发之后，不再冒泡，修改后的代码如下所示。
vue中的.capture .self .prevent .stop .once区分，初步理解
ssza02的博客
10-09 562
capture和self主要是函数执行顺序的问题 .capture先执行父级的函数，再执行子级的触发函数(一般用法)， 即是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。 <div v-on:click.capture='alert("1")' style="width: 100%;height: 45px;background-colo...
Vue----.stop、.prevent、.capture、.self用法以及.stop和.self的区别
GaoXiR的博客
12-27 3207
1、" .stop “： 阻止冒泡，具体事例，在点击【戳他】按钮后，触发 input对应的函数 ‘btnHandler’，该函数执行完成后，会触发div的函数’ divHandler '，为了防止此类情况的发生，需要在Input的点击事件上添加” .stop "。 <div class="inner" @click="divHandler"> <!-- 使用 .st...
vue中的事件修饰符
C20000407的博客
07-27 1016
vue中的事件修饰符 1.prevent：阻止默认事件（常用） <a href="http://www.baidu.com" @click.prevent="showinfo"></a> 2.stop：阻止事件冒泡（常用） *{ margin-top: 20px; } .demo1{ height: 50px; background-color: skyblue; } <div class="demo1" @click="showInfo"> <butto
vue之事件修饰符详解（ .stop、.prevent、 .capture 、.self、.once、passive）
weixin_43337481的博客
05-24 2029
这个 .passive 修饰符尤其能够提升移动端的性能。.once 是将事件设置为只执行一次,如 .click.prevent.once 代表只阻止事件的默认行为一次,当第二次触发的时候事件本身的行为会执行。.stop 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件。.self 是只有是自己触发的自己才会执行,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号。.prevent 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交。
20 六种事件修饰符：stop、prevent、capture、self、once和passive解决冒泡事件
wgchen
12-01 5253
[基础]Vue绑定事件详讲-事件修饰符通过修饰符解决冒泡事件stop修饰符self修饰符其它常用修饰符初始页面 绑定事件中的修饰符有很多种，这些修饰符各有各的用处。 本节课将讲解6种Vue中的事件修饰符，分别是； stop、prevent、capture、self、once和passive。 通过修饰符解决冒泡事件 在JavaScript中冒泡事件是最长处理的事件，先写一段代码，手动创造一个冒泡事件。 新建一个文件Demo20.html 修改模板 template 部分，在最外层增加一个 <div&
vue中事件修饰符详解(stop, prevent, self, once, capture, passive)
张兴华的博客
06-20 1万+
.stop 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件 .prevent 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交 .self 是只有是自己触发的自己才会执行,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号 .capture 是改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式 .once 是...
VUE的事件修饰符，once,prevent,stop，capture,self,passive
热门推荐
qq_34164814的博客
05-27 3万+
once，只执行一次 &amp;lt;div v-on:click.once='alert(&quot;1&quot;)'&amp;gt;&amp;lt;/div&amp;gt; 只有在第一次点击时会执行，再次点击不会起作用 2. prevent 阻止默认程序，比如form表单中的summit提交按钮，会自己提交， &amp;lt;form v-on:submit=&quot;alert('who')&
vue中事件修饰符，stop,prevent,capture,self,once
lannieZ的博客
09-14 1085
1,stop修饰符，能够阻止冒泡事件，按照案例说明如下： 按钮在div容器中。 ①，点击框中非按钮的位置，会触发div的事件 ②点击图中 “stop事件” 按钮 ，会发生冒泡事件，执行按钮事件的同时，也会执行div的事件 注意：此时还没加stop事件 ③，代码添加stop事件后（@click.stop）的效果，控制台打印结果如下， stop会阻止事件冒泡行为。 <template> <div> <!-- 使用 .stop阻止冒泡 -->
vue-事件修饰符-详解（.prevent .stop .once .capture .self）
Ace-Liang博客
04-24 1万+
vue事件修饰符-详解 .prevent -------等于javascript的event.preventDefault() 作用：阻止默认程序的运行 <form @submit.prevent="SomeFunction"></form> 单独submit点击后会自动进行提交等一系列操作，prevent就可以阻止这些操作，让上面这段代码乖乖执行我们分配给它的Som...
Vue事件修饰符详解：stop、prevent、capture、self、once和passive
"这篇文档详细介绍了Vue框架中的六种事件修饰符：stop、prevent、capture、self、once和passive，以及它们如何帮助解决冒泡事件的问题。" Vue.js是现代前端开发中广泛使用的框架，它提供了一种优雅的方式来处理DOM...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值