初学vue2 之 .stop事件修饰符来阻止事件冒泡

最新推荐文章于 2025-02-14 09:25:20 发布
原创 最新推荐文章于 2025-02-14 09:25:20 发布 · 750 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue2

本文介绍如何使用Vue.js阻止点击事件从子元素传播到父元素。通过加入.stop事件修饰符，可以实现仅触发子元素的点击事件而不影响其父元素。

如过我们给父元素和子元素都绑定了点击事件，那么当点击子元素时，同时也会触发父元素的事件，所以我们要阻止事件的传播。

如下:

    <div class="clickfather" @click="father()">
      <div class="clickchild" @click="child()"></div>
    </div>

当点击子元素时 会触发child() 和 father() 两个事件，这时可以在子元素加入.stop事件修饰符。

如下:

    <div class="clickfather" @click="father()">
      <div class="clickchild" @click.stop="child()"></div>
    </div>
这时点击子元素就只会触发child() 事件了


Vue基础教程（71）事件修饰符：Vue事件修饰符防“手残”指南：.stop、.prevent，让你的代码不再“冒泡”和“搞事”！
jxf_jxfcsdn的博客
09-29 273
还在为点击事件触发父级元素而抓狂？表单提交总是不小心刷新页面？Vue事件修饰符就是你的“防手残”神器！本文用最接地气的方式，深度剖析.stop、.prevent、.capture、.once等修饰符，把它们比作“点到为止”、“打断施法”、“事件监听员”等有趣角色。附上从入门到实战的完整示例，让你在爆笑中彻底搞懂如何优雅控制事件流，告别繁琐的event.preventDefault()，写出更清爽、更强大的Vue代码。快来解锁这些代码“快捷键”吧！
常见Vue事件修饰符浅析
m0_67587248的博客
10-09 276
所谓的capture就是指在事件捕获阶段监听还是在冒泡阶段监听，将其设置为true表示在捕获阶段监听，设置为false表示在冒泡阶段监听。.prevent修饰符代表event.preventDefault()，加上这个修饰符，就等于在方法中加上了这句代码。例如执行滚动操作，当监听页面的滚动事件时，只有当方法执行过程结束后页面才会滚动，但当在移动端时就会造成滚动卡顿的现象。.stop修饰符代表event.stopPropagation()，加上这个修饰符，就等于在方法中加上了这句代码。
事件修饰符(1) .stop 阻止冒泡
最爱喝怡宝的博客
11-10 1237
在vue中使用.stop来阻止默认冒泡事件 <div id="app"> <div id="inner" @click="innerClick()"> <input type="button" value="按钮" @click="btnClick()" name="" id=""> </div> </div> <script src="./js/vue.js"&gt
Vue事件修饰符中的 阻止事件冒泡 .stop
weixin_41807530的博客
07-15 562
用法：<a v-on:click.stop="doThis"></a>或者<a @click.stop="doThis"></a> 修饰符.stop应该放在需要阻止冒泡的位置上。 例： <div id="gpa" @click="dodo"> <div id="pa" @click="doThat"> ...
Vue2.0中的事件修饰符
weixin_50379372的博客
06-24 535
Vue2.0中的事件修饰符： 1.prevent:阻止默认事件，原生js里面为event.preventDefault() 2.stop:阻止事件冒泡 3.once:事件只触发一次 4.capture:使用事件的捕获模式:事件分为捕获阶段和冒泡阶段，事件捕获阶段事件执行顺序是有外向内，就是父向子，冒泡阶段事件执行时由内向外，子向父 5.self:只有event.target是当前操作元素是才触发事件 6.passsive:事件的默认行为立即执行，无需等待事件.
Vue-.stop修饰符
Study123wf的博客
12-11 1059
在vue中，子元素和父元素均有各自的事件时，为了不让子元素的事件冒泡到父元素，触发父元素的事件执行。此时要给子元素事件添加.stop修饰符阻止事件冒泡！
stop事件修饰符
Kingpin的博客
07-09 1295
stop事件修饰符 修饰符 说明 .stop 阻止冒泡 stop事件修饰符具体介绍 .stop .stop用来防止冒泡 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="w...
vue.js2.chm中文手册下载
11-28
还可以使用`.method`修饰符，如`@click.stop`阻止事件冒泡，`@click.prevent`阻止默认行为。 六、Class与Style绑定 Vue.js允许动态绑定CSS类和内联样式。v-bind:class可以结合对象和数组实现多态的类绑定，v-bind:...
学习最新vue20.17.0-事件处理
owerm的博客
10-17 1120
vue中文官网我在官网基础上，添加些代码，方便初学者学习，能够快速理解官网内容，掌握自己所需要的知识，以便节省宝贵的时间。
VUE初学---事件处理 v-on:click、v-on:keyup
qq_42970981的博客
11-22 4091
为什么在 HTML 中监听事件? 你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 v-on 有几个好处： 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。 因为你无...
1. Vue stop修饰符
白怀宇的博客
06-12 595
Vue stop修饰符 概述 stop修饰符用于阻止事件的冒泡传递 用法 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0,
vue的事件修饰符之.stop
qq_58174484的博客
01-24 9363
事件冒泡的解决方法
vue事件修饰符（stop 阻止冒泡）
weixin_42213918的博客
08-02 1201
上面操作是点击了按钮，我们看到不仅按钮的点击事件被触发，它的父级容器也被触发了 开发时难免会遇见这种情况 好比列表页 有时list会有一些按钮操作，那么这时我们就可以使用.stop来阻止这个冒泡了 ...
Vue事件修饰符之.stop：阻止事件冒泡的优雅方案
最新发布
exlink2012的专栏
02-14 664
在DOM事件处理中，当子元素触发事件时，会按照「子元素 → 父元素」的顺序逐级向上传播，这种现象称为事件冒泡。Vue通过事件修饰符提供了一种声明式的解决方案，其中`.stop`修饰符便是处理事件传播的利器。
2——VUE 指令 事件绑定，.stop阻止冒泡
qq_41067077的博客
11-20 727
所有的指令以自定义属性的方式去写 v-xxx ,指令就是vue提供给我们能够更方便将数据和页面展示出来的操作，具体就是以数据去驱动DOM ,简化DOM操作的行为。如果需要为元素的属性动态绑定属性值，则需要用到 由于 v-bind 指令在开发中使用频率非常高，因此，vue 官方为其提供了简写形式（简写为英文的 : ）。语法：V-bind:属性名=“挂载的数据” 简写 ：属性名=”挂载的数据” 解析属性,单向的数据绑定。注意：v-if比v-show更多的消耗性能，所以推荐使用v-show。
vue中事件修饰符，stop,prevent,capture,self,once
肖帅的博客
01-10 1273
1,stop修饰符，能够阻止冒泡事件，按照案例说明如下： 按钮在div容器中。 ①，点击框中非按钮的位置，会触发div的事件 ②点击图中 “stop事件” 按钮 ，会发生冒泡事件，执行按钮事件的同时，也会执行div的事件 注意：此时还没加stop事件 ③，代码添加stop事件后（@click.stop）的效果，控制台打印结果如下， stop会阻止事件冒泡行为。 代码如下： <templ...
element中vue .stop阻止事件冒泡失效的解决方法
globalvariableA的博客
04-22 4031
解决思路就是在外层套一个div，使用div的@click.stop方法
深入探索Vue.js中的.stop修饰符：从基础到高级
欢迎来到软件测试jeffky博客！在这里，我们将探讨各种与软件测试相关的主题，包括测试策略、方法、工具、最佳实践和行业趋势。我们的目标是帮助读者提高软件质量，确保用户满意度，并分享在软件测试领域的知识和经验。
12-19 1185
stop修饰符用于阻止事件的传播（即冒泡）。在Vue.js中，当一个事件被触发时，如果使用了.stop修饰符，那么该事件将不会继续传播到父元素。</</.stop修饰符是Vue.js中一个强大的工具，用于阻止事件的冒泡。通过深入理解和正确使用.stop修饰符，开发者可以实现更灵活和动态的用户界面，从而提高应用的用户体验和响应速度。希望本文能够帮助你全面掌握.stop修饰符的使用技巧，并在你的Vue.js项目中发挥出更大的作用。
vue里面事件修饰符.stop使用案例
专注测试领域知识分享和技能提升
04-17 1082
Vue.js 事件修饰符 .stop 用于阻止事件继续传播，即阻止事件冒泡。这在处理父子组件之间的事件通信时特别有用，可以防止事件从子组件冒泡到父组件，或者在一个元素上绑定多个事件处理函数时，阻止后续事件处理函数的执行。下面是一个使用 .stop 事件修饰符的简单案例：运行效果：当点击页面的Click Button文案时，浏览器的Console位置只会输出一句Child button clicke...
Vue.js中v-on事件绑定的使用详解
Vue 提供了一系列修饰符来简化常见需求，比如 `.stop` 阻止事件冒泡、`.prevent` 阻止默认行为、`.once` 只触发一次事件、`.self` 仅当事件源是元素自身时才触发等。这些修饰符可以通过点语法附加在事件名称之后，如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值