vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue鼠标点击事件和键盘事件

Vue鼠标点击事件和键盘事件举例详解

作者：编程阿牛

在Vue框架中我们经常需要绑定各种JS事件,如"点击事件"、"鼠标移动事件"、"键盘事件"等等,这篇文章主要给大家介绍了关于Vue鼠标点击事件和键盘事件的相关资料,需要的朋友可以参考下

Vue中的鼠标点击事件修饰符：

vue的@click.prevent

@click.prevent 是 Vue 中的一个事件修饰符，用于阻止浏览器默认行为和事件冒泡。

在 Vue 组件中，当你使用 @click.prevent 修饰符时，Vue 会在触发 click 事件时调用事件处理程序，并且会使用 event.preventDefault() 方法阻止浏览器默认行为。例如，当你在一个链接上添加 @click.prevent 修饰符时，点击该链接不会导致浏览器跳转到链接的目标页面，而是只会调用事件处理程序。

此外，当你使用 @click.prevent 修饰符时，Vue 还会使用 event.stopPropagation() 方法阻止事件冒泡。这意味着，当你在一个具有嵌套结构的组件中添加 @click.prevent 修饰符时，如果你点击一个子组件，事件处理程序不会被传递到父组件中。只有当你在具有该修饰符的元素上直接点击时，才会触发事件处理程序。

例如，如果你在一个表单提交按钮上添加 @click.prevent 修饰符，点击该按钮不会导致表单提交，而只会调用事件处理程序。这对于需要在按钮被点击时进行一些自定义逻辑或者异步提交表单的情况非常有用。

vue的@click.stop

在Vue中，可以使用@click.stop来阻止事件冒泡。

事件冒泡是指事件从嵌套元素中的最深处向外传递的过程。当一个元素上触发了事件，它会向上冒泡到其父元素，直到传递到文档的根元素。这意味着在子元素上触发的事件也会在其祖先元素上触发。

如果你想阻止事件从子元素冒泡到父元素，可以在子元素上使用@click.stop指令。例如，下面的代码将阻止child元素的click事件冒泡到parent元素：

<div @click="parent">
  <div @click.stop="child"></div>
</div>

在这个例子中，当用户点击child元素时，parent方法不会被调用，因为@click.stop阻止了事件冒泡到parent元素。

vue的@click.capture

@click.capture 是 Vue 中的一个事件修饰符，用于在触发事件时捕获所有的冒泡事件。

事件捕获和事件冒泡是两种不同的事件传播方式。在事件捕获阶段，事件从顶层元素逐级向下传递到目标元素；在事件冒泡阶段，事件从目标元素逐级向上传递到顶层元素。默认情况下，Vue 组件中的事件处理程序只会在事件冒泡阶段被调用。

当你使用 @click.capture 修饰符时，Vue 会在事件捕获阶段调用事件处理程序，而不是在事件冒泡阶段。这意味着事件处理程序将在子组件之前调用，而不是在子组件之后调用。

例如，如果你在一个包含多个子组件的组件上添加 @click.capture 修饰符，那么当你点击子组件时，事件处理程序将首先在父组件中被调用，然后才会在子组件中被调用。

这个修饰符通常用于需要在父组件中拦截事件并进行一些处理的情况，例如在组件外部点击时关闭下拉菜单。

vue的@click.once

@click.once 是 Vue 中的一个事件修饰符，用于绑定一个只会触发一次的点击事件处理程序。

当你在一个元素上添加 @click.once 修饰符时，Vue 会在该元素被点击一次时调用事件处理程序，并立即将该修饰符从事件中删除。这意味着，当你再次点击该元素时，不会再触发事件处理程序。

例如，你可以在一个打开对话框的按钮上添加 @click.once 修饰符，以确保对话框只会被打开一次。当用户再次点击该按钮时，不会再次打开对话框。

需要注意的是，@click.once 修饰符只会在绑定的元素上生效，如果该元素有子元素，并且你点击了其中一个子元素，那么该子元素的点击事件处理程序也会被触发。如果你希望只在点击该元素本身时触发事件处理程序，可以使用 @click.self.once 修饰符。

vue的@click.self

@click.self 是 Vue 中的一个事件修饰符，用于绑定一个只有在点击元素本身时才会触发的点击事件处理程序。

在 Vue 组件中，当你使用 @click.self 修饰符时，Vue 会在触发 click 事件时调用事件处理程序，但是只有当你直接点击该元素本身时才会触发。如果你点击该元素的子元素，事件处理程序不会被触发。

例如，当你在一个具有嵌套结构的组件中，需要在点击组件本身时进行一些自定义逻辑，而在点击组件内部的某个子元素时不进行任何操作时，你可以使用 @click.self 修饰符。

需要注意的是，@click.self 修饰符只会在绑定的元素上生效，如果该元素有子元素，并且你点击了其中一个子元素，那么该子元素的点击事件处理程序也会被触发。如果你希望只在点击该元素本身时触发事件处理程序，并且忽略子元素的点击事件处理程序，可以使用 @click.prevent 和 @click.stop 修饰符。

vue的@click.passive

@click.passive 修饰符可以在 Vue 组件中用于优化 click 事件的性能。下面是一个使用 @click.passive 修饰符的示例：

<template>
  <div @click="handleClick" @click.passive="handleClickPassive">Click me</div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Clicked!');
      // 阻止默认行为
      event.preventDefault();
    },
    handleClickPassive() {
      console.log('Clicked (passive)!');
    }
  }
}
</script>

在这个示例中，当你在 div 元素上点击时，会触发两个事件处理程序：handleClick 和 handleClickPassive。handleClick 方法会调用 event.preventDefault() 方法阻止默认行为，而 handleClickPassive 方法则使用了 @click.passive 修饰符告知浏览器该事件处理程序不会调用 event.preventDefault() 方法。

由于使用了 @click.passive 修饰符，浏览器可以在处理 click 事件时进行一些性能优化，从而提高性能和响应速度。

 vue的键盘相应事件

当我们在 Vue.js 中处理键盘事件时，通常需要使用以下几种键盘事件：

@keydown - 按下键盘上的任意一个键时触发的事件。

<template>
  <div @keydown="onKeyDown"></div>
</template>

<script>
export default {
  methods: {
    onKeyDown(event) {
      console.log('KeyDown event:', event.key);
    }
  }
}
</script>

@keyup - 松开键盘上的任意一个键时触发的事件。

<template>
  <div @keyup="onKeyUp"></div>
</template>

<script>
export default {
  methods: {
    onKeyUp(event) {
      console.log('KeyUp event:', event.key);
    }
  }
}
</script>

@keypress - 当按下字符键时触发的事件。

<template>
  <div @keypress="onKeyPress"></div>
</template>

<script>
export default {
  methods: {
    onKeyPress(event) {
      console.log('KeyPress event:', event.key);
    }
  }
}
</script>

@keydown.[key] - 当按下特定键时触发的事件，可以通过键名进行绑定。

<template>
  <div @keydown.enter="onEnterKeyDown"></div>
</template>

<script>
export default {
  methods: {
    onEnterKeyDown() {
      console.log('Enter key is pressed!');
    }
  }
}
</script>

@keyup.[key] - 当松开特定键时触发的事件，可以通过键名进行绑定。

<template>
  <div @keyup.enter="onEnterKeyUp"></div>
</template>

<script>
export default {
  methods: {
    onEnterKeyUp() {
      console.log('Enter key is released!');
    }
  }
}
</script>

@keydown.[key].prevent - 当按下特定键时阻止默认行为，可以通过 prevent 修饰符实现。

<template>
  <div @keydown.enter.prevent></div>
</template>

以上是常用的键盘事件，你可以根据实际需求进行选择和使用。在代码中，我们可以通过 event 参数来获取键盘事件的相关信息，如按下的键的名称、keyCode 码等等。通过键盘事件，我们可以实现一些常见的交互操作，例如：表单验证、搜索提示等等。

总结

到此这篇关于Vue鼠标点击事件和键盘事件的文章就介绍到这了,更多相关Vue鼠标点击事件和键盘事件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文