vue 阻止事件向下传递

最新推荐文章于 2023-05-17 22:16:20 发布

郝帅444

最新推荐文章于 2023-05-17 22:16:20 发布

阅读量1.5k

点赞数

文章标签： vue.js 前端 css

本文链接：https://blog.csdn.net/m0_71615654/article/details/128717784

版权

该文章讲述了在Vue.js中如何使用`@click.stop`指令来绑定点击事件，并在`goDetails`函数中通过`e.srcElement.localName`检查点击元素的标签名。当点击的是`div`元素时，动态地添加背景色和边框样式，展示了事件处理和元素样式的编程技巧。

摘要由CSDN通过智能技术生成

元素事件绑定

      <div
        @click.stop="goDetails($event)"
      >
      </div>

    goDetails(e) {
      console.log(e.srcElement.localName);
      if (e.srcElement.localName == "div") {
        e.srcElement.style.background = "rgba(142, 110, 63, 0.1)";
        e.srcElement.style.border = "1px solid #8e6e3f";
      }
    },

解释： e.srcElement.localName 获取点击事件元素的标签名进行判断给指定元素加状态样式

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

郝帅444

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Vue3 - Element Plus 下拉菜单 el-dropdown 阻止冒泡传递到上层触发事件，解决 dropdown 下拉菜单组件被容器元素包裹时点击事件触发，会连带触发外层包裹容器的点击事件

王佳斌

02-27

2205

vue3，element plus，el-dropdown，stop，command，使用.stop无效，下拉菜单组件，下拉菜单Dropdown，点击事件冒泡，@command如何绑定stop修饰符，阻止事件冒泡，使用el-dropdown下拉菜单阻止事件冒泡，阻止了点击事件冒泡，触发了父元素怎么办，click点击时带动了外层元素的点击事件咋办，如何解决vue3使用下拉菜单组件时，点击触发方式会连同上层div同时触发click点击，element plus组件自带的事件如何阻止其冒泡，阻止内层冒泡，将dro

【前端攻城狮之vue基础】01原生事件和vue事件知识基础和拓展

zbcwmq的博客

02-05

471

事件循环模型,进程和线程，事件的三个阶段，事件的冒泡，事件的委托，事件的捕获，vue事件和原生事件的区别，vue事件修饰符，js代码分类，浏览器内核，浏览器内核模块等

参与评论您还未登录，请先登录后发表或查看评论

对vue中的事件穿透与禁止穿透实例详解

10-16

今天小编就为大家分享一篇对vue中的事件穿透与禁止穿透实例详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue中阻止click事件冒泡,防止触发另一个事件的方法

08-28

下面小编就为大家分享一篇vue中阻止click事件冒泡,防止触发另一个事件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue事件委托传递节点防止向下传递穿透

weixin_42835782的博客

01-20

4403

例如： <li @click="popSelect($event)"> <span>Bank Country</span> <input type="text" placeholder="Select bank country" v-model="model.bank_country" name="bank_country" readonly /> <van-icon name="arrow-down"></van-i

vue click.stop阻止点击事件继续传播

金溪的博客

10-21

731

<div id="app"> <div v-on:click="dodo"> <button v-on:click="doThis">阻止单击事件继续传播</button> </div> </div> <script> va...

vue click.stop阻止点击事件继续传播

如果我年少有为不自卑

11-14

4万+

<div id="app"> <div v-on:click="dodo"> <button v-on:click="doThis">阻止单击事件继续传播</button> </div> </div> <script> var app = new Vue({ el: "#app",

vue click.stop阻止点击事件继续传播的方法

10-18

在某些情况下，我们可能希望阻止事件的默认行为或者防止事件继续向上级元素传播。`click.stop`修饰符正是为了解决这个问题，它提供了阻止点击事件冒泡的功能。首先，让我们深入理解事件冒泡。在DOM中，当一个元素...

vue实现简易图片左右旋转,上一张,下一张组件案例

10-15

`hideMask`方法则用于关闭组件，通过`$emit`向父组件发送`hideMask`事件。 `computed`属性`imgList`用于过滤掉非图片类型的附件，只保留指定格式的图片文件，如`.png`, `.jpeg`, `.jpg`等。总的来说，这个Vue组件...

vue click.stop 阻止点击事件继续传播（阻止事件冒泡）

且听风吟的博客

08-05

1351

vue click.stop 阻止点击事件继续传播（阻止事件冒泡）

vue阻止向上和向下冒泡

Lotus的博客

05-13

1万+

1.阻止向下冒泡 <div class="content" @click.self="cancelFunc"></div> 2.阻止向上冒泡 <div class="item" @click.stop="function">

vue.js（2）：如何阻止事件传播和默认行为

u013938578的博客

08-19

4213

1.事件冒泡 IE提出的事件流是事件冒泡流，这种事件流传播是由内向外进行传递。即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档），如下图：下面演示VUE.JS中的事件冒泡，代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src.

vue @touchmove.prevent 阻止苹果手机透过modal层触发底层滚动

WGYHAPPY的博客

01-14

886

<view :class="'spceial cu-modal ' + (!curPrizeShow.hide ? 'show' : '')" @touchmove.stop.prevent="preventTouchMove"> ... methods: { preventTouchMove(event) { event.preventDefault() }, }

Vue2.0学习笔记：Vue事件修饰符的使用

weixin_30593443的博客

08-02

300

事件处理如果需要在内联语句处理器中访问原生DOM事件。可以使用特殊变量$event，把它传入到methods中的方法中。在Vue中，事件修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理。在Vue中事件修饰符主要有： .stop：等同于JavaScript中的event.stopProp...

上下组件点击事件传递问题

jam476的专栏

08-07

463

在一个cell 上有个点击事件，在cell 上的按钮有个独立的事件，如果两个事件都用@click 去触发，按钮点击除了会执行按钮事件，同时也会执行cell事件 vue中有个事件修饰符,有stop 、prevent、self、once、capture、passive、native。其中的stop 用来阻止事件冒泡，就不会向下传递了 ...

Javascript中怎样阻止事件传播？