vue js 阻止事件冒泡

最新推荐文章于 2023-05-10 22:10:46 发布

原创最新推荐文章于 2023-05-10 22:10:46 发布 · 615 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript #vue.js

前端学习同时被 2 个专栏收录

16 篇文章

订阅专栏

Js学习

7 篇文章

订阅专栏

本文介绍在Vue.js中如何使用@click.stop修饰符有效阻止事件冒泡，避免父组件响应子组件触发的事件，提供了具体代码示例。

vue js 阻止事件冒泡
本来想用preventDefault来阻止冒泡，但是没有效果
于是试了vue.js提供的v-on的事件修饰符，参考博文
其中 @click.stop阻止单击事件继续传播

<template>
  <div class="rabbit" ref="rabbit" @click.stop="clickRun($event)">
  </div>
</template>

clickRun(e) {
        //在click后面加上.stop,可以直接阻止单击事件继续传播
      // if (e) {
      //   e.preventDefault()
      // }
        if(this.IsRun) {
          clearTimeout(this.timecode)
          this.IsRun = false
        } else {
          this.timefun()
          this.IsRun = true
        }

      }