首页 前端知识 『VUE』10. 事件修饰符(详细图文注释)

『VUE』10. 事件修饰符(详细图文注释)

2024-08-14 00:08:05 前端知识 前端哥 295 854 我要收藏

目录

    • 什么是事件修饰符?
      • vue
      • js
    • 不使用修饰符 原生js实现禁用事件对象的默认事件
    • 使用事件修饰符 .prevent
    • 使用事件修饰符 .stop
    • 使用事件修饰符 .self


欢迎关注 『VUE』 专栏,持续更新中
欢迎关注 『VUE』 专栏,持续更新中

什么是事件修饰符?

vue

在 Vue.js 中,事件修饰符是一种用于处理 DOM 事件的特殊指令,可以在事件处理程序中提供额外的控制或功能。以下是一些常用的 Vue.js 事件修饰符:

.stop:阻止事件继续传播,即调用 event.stopPropagation()。

<button @click.stop="handleClick">Click Me</button>

.prevent:阻止事件的默认行为,即调用 event.preventDefault()。

<form @submit.prevent="handleSubmit">Submit Form</form>

.capture:使用事件捕获模式,即在捕获阶段处理事件。

<div @click.capture="handleClick">Click Me</div>

.self:只有当事件是从元素自身触发时才会触发处理函数,而不是冒泡过程中的其他元素。

<div @click.self="handleClick">Click Me</div>

.once:事件只会触发一次,之后移除事件监听器。

<button @click.once="handleClick">Click Me Once</button>

.passive:指示浏览器不应该阻止事件的默认行为,可以提高页面滚动性能。

<div @touchstart.passive="handleTouchStart">Touch Me</div>

js

  • event.preventDefault() :调用 event.preventDefault() 方法会告诉浏览器取消事件的默认行为。比如,在点击链接时,如果你调用了 event.preventDefault(),那么链接不会导航到新的页面

  • event.stopPropagation():
    这个方法用于停止事件在 DOM 树中的传播,阻止事件的进一步传播或冒泡。如果一个父元素和子元素都绑定了相同类型的事件,并且事件在子元素上触发后还要继续冒泡到父元素,你可以在子元素上调用 event.stopPropagation() 来阻止这种冒泡行为。

  • event.stopImmediatePropagation():
    这个方法与 event.stopPropagation() 类似,但是它不仅停止事件传播,还阻止任何后续事件处理程序被调用。

  • return false:
    在某些情况下,可以在事件处理函数中使用 return false 来同时阻止默认行为和停止事件传播。例如,在 HTML 中使用 οnclick=“return false;” 可以达到这个效果。


不使用修饰符 原生js实现禁用事件对象的默认事件

我们点击网页上的跳转按钮后会跳转到百度,也会控制台中打印"点击了",使用e.preventDefault()就可以禁用网页跳转.

EventDemo6.vue

<template>
  <h3>事件修饰符</h3>
  <a @click="eventStyle" href="www.baidu.com">跳转</a>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    eventStyle(e) {
      e.preventDefault(); //禁用控件本身默认的事件,比如说我们a标签的跳转到百度事件会被禁用
      console.log("点击了");
    },
  },
};
</script>


点击了这么多下还在原来的网页.
在这里插入图片描述


使用事件修饰符 .prevent

注释了// e.preventDefault(),但是通过@click.prevent="eventStyle"的方式设置了禁用默认事件.

EventDemo6.vue

<template>
  <h3>事件修饰符</h3>
  <a @click.prevent="eventStyle" href="www.baidu.com">跳转</a>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    eventStyle(e) {
      //   e.preventDefault(); //禁用控件本身默认的事件,比如说我们a标签的跳转到百度事件会被禁用
      console.log("点击了");
    },
  },
};
</script>


使用事件修饰符 .stop

  • 不使用.stop,先触发了p然后因为p在div中,点击p触发之后还会触发div的事件,顺序是p-div的冒泡顺序
    在这里插入图片描述
<template>
  <h3>事件修饰符</h3>
  <a @click.prevent="eventStyle" href="www.baidu.com">跳转</a>

  <div @click="clickDiv">
    <p @click="clickP">点我先触发p还是div呢?</p>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    eventStyle(e) {
      //   e.preventDefault(); //禁用控件本身默认的事件,比如说我们a标签的跳转到百度事件会被禁用
      console.log("点击了");
    },
    clickDiv() {
      console.log("点击了div");
    },
    clickP() {
      console.log("点击了p");
    },
  },
};
</script>

  • 使用了.stop 禁用了冒泡,只触发了p不会触发父节点div的事件
    在这里插入图片描述
<template>
  <h3>事件修饰符</h3>
  <a @click.prevent="eventStyle" href="www.baidu.com">跳转</a>

  <div @click="clickDiv">
    <p @click.stop="clickP">点我先触发p还是div呢?</p>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    eventStyle(e) {
      //   e.preventDefault(); //禁用控件本身默认的事件,比如说我们a标签的跳转到百度事件会被禁用
      console.log("点击了");
    },
    clickDiv() {
      console.log("点击了div");
    },
    clickP() {
      console.log("点击了p");
    },
  },
};
</script>


使用事件修饰符 .self

只有点击"div的内容"才会触发,也就是只有点击了div本身自己才能触发事件,不受到冒泡影响.哪怕p没有使用.stop也不会通过p触发div

<template>
  <h3>事件修饰符</h3>
  <a @click.prevent="eventStyle" href="www.baidu.com">跳转</a>

  <div @click.self="clickDiv">
    div的内容
    <p @click="clickP">点我先触发p还是div呢?</p>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    eventStyle(e) {
      //   e.preventDefault(); //禁用控件本身默认的事件,比如说我们a标签的跳转到百度事件会被禁用
      console.log("点击了");
    },
    clickDiv() {
      console.log("点击了div");
    },
    clickP() {
      console.log("点击了p");
    },
  },
};
</script>


## 总结 大家喜欢的话,给个👍,点个关注!给大家分享更多计算机专业学生的求学之路!

版权声明:

发现你走远了@mzh原创作品,转载必须标注原文链接

Copyright 2024 mzh

Crated:2024-3-1

欢迎关注 『VUE』 专栏,持续更新中
欢迎关注 『VUE』 专栏,持续更新中
『未完待续』


转载请注明出处或者链接地址:https://www.qianduange.cn//article/15525.html
标签
评论
发布的文章

04-Json/Ajax/Vue的知识

2024-08-21 10:08:39

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!