javascript @click.stop=“a()” && @click.prevent=“b()“

原创已于 2023-06-04 23:00:44 修改 · 450 阅读

1 ·

CC 4.0 BY-SA版权

创作源自于MyFreeIT

文章标签：

#javascript #vue.js

于 2023-06-04 22:49:25 首次发布

Script 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了Vue.js中两个重要的事件修饰符：@click.stop用于阻止事件冒泡，确保只有当前组件的点击事件生效；@click.prevent则用于防止<a>标签的默认跳转行为，转而执行指定方法。同时，提到了在JavaScript中调用方法时，可以省略括号，但为了代码规范性建议保留。

@click.stop 阻止父component执行click，只有本component的click有效。

@click.prevent 阻止<a>的href执行，转而执行prevent指定的方法。

另外JS 调用方法时，可以不加（），" " 等，可以直接使用函数名。不过为了统一和易读性，建议还是书写完整。

HTML

<div id="app">
  <div @click="box()">
    <div @click.stop="boxchild">
      Click me
    </div>
  </div>
  <a href="google.com" @click.prevent="box">Click this link</a>
</div>

Vue

var app = new Vue({
  el: "#app",
  data: {
    name: "Vue.js"
  },
  methods: {
    box: function() {
      alert("this is box event");
    },
    boxchild: function() {
      alert("this is boxchild event");
    }
  }
});

代码在线演示。