记住Vue鼠标修饰符，让你拿捏鼠标！ 欢迎大佬补充~

引言

Vue为我们提供了一系列的鼠标事件修饰符，这使得处理鼠标事件更加方便和灵活。通过使用修饰符我们可以简化常见的鼠标事件处理，让我们一起来汇总认识一下它们并记住它们吧~ ，如果有不完整的地方欢迎大佬们补充~

让我们从简单的开始：

1. .left

修饰符 .left 仅在点击鼠标左键时触发事件。

<!-- 仅在点击左键时触发 click 事件 -->
<div @click.left="handleLeftClick">Click me</div>

这个修饰符确保了事件只有在我们点击了鼠标左键时才会被触发，而其他鼠标按键的点击被忽略，怎么点都是无效的。当我们只需要左键点击触发的时候只要添加一个.left就可以啦，例如在游戏中，左键就通常用于选择或确认操作。

2. .right

很明显，有了.left的例子你肯定知道了吧，它们就是左键右键两兄弟，就不用多赘述啦~ 修饰符 .right 仅在点击鼠标右键时触发事件。

<!-- 仅在点击右键时触发 contextmenu 事件 -->
<div @contextmenu.right="handleRightClick">Right-click me</div>

3. .middle

同样的，顾名思义~ 修饰符 .middle 仅在点击鼠标中键时触发事件。

htmlCopy code
<!-- 仅在点击中键时触发 mousedown 事件 -->
<div @mousedown.middle="handleMiddleClick">Middle-click me</div>

4. .stop

修饰符 .stop 阻止鼠标事件冒泡。

<!-- 阻止鼠标事件冒泡 -->
<div @click.stop="handleClick">Click me</div>

这个修饰符的效果就是，当鼠标点击了这个 <div> 元素时，handleClick 方法就会被调用，但是这个事件不会继续冒泡到父元素。通常情况下，如果没有 .stop 修饰符，事件会沿着 DOM 树向上传播，触发父元素上相同类型的事件。而使用了 .stop 后，事件会在当前元素被处理后停止传播，不再传递给父元素。

让我们用一个简单的冒泡事件的例子，来给大家演示一下如何使用 .stop 修饰符阻止事件冒泡吧：

<template>
  <div @click="handleParentClick">
    <p @click.stop="handleChildClick">Click me</p>
  </div>
</template>

<script>
export default {
  methods: {
    handleParentClick() {
      console.log("Parent element clicked");
    },
    handleChildClick() {
      console.log("Child element clicked, and event propagation stopped");
    },
  },
};
</script>

• 父元素上使用 @click 绑定了 handleParentClick 方法，当点击父元素时会触发这个事件。
• 子元素上使用 @click.stop 绑定了 handleChildClick 方法，当点击子元素时会触发这个事件，但是事件不会传播到父元素。

通过.stop绑定后，我们点击子元素时，只有子元素的事件被触发，而父元素的事件被阻止冒泡。这种阻止冒泡的机制在开发中就常用于避免触发不必要的父元素事件，从而确保特定元素的事件得到处理。

比如说，在一个弹出式菜单中，你可能会想要点击菜单内的项时阻止冒泡，以避免触发父容器的点击事件关闭菜单。

5. .prevent

修饰符 .prevent 阻止鼠标事件的默认行为。

<!-- 阻止鼠标右键的默认行为 -->
<div @contextmenu.prevent="handleRightClick">Right-click me</div>

在鼠标右键点击了这个 <div> 元素时，handleRightClick 方法会被调用，但是事件不会触发浏览器默认的上下文菜单。因为在通常情况下，右键点击页面会触发浏览器的默认上下文菜单，但是通过使用 .prevent 修饰符，我们就可以阻止这个默认行为。

比如说，在一个Web应用中，我们可能希望用户右键点击某个元素的时候能显示我们自定义的上下文菜单，而不是浏览器默认的菜单。

6. .capture

修饰符 .capture 将事件处理程序添加到捕获阶段。

<!-- 在捕获阶段处理 mousedown 事件 -->
<div @mousedown.capture="handleMouseDown">Mouse down</div>

没听懂没关系，其实就是将事件处理程序添加到事件流的捕获阶段。因为在 DOM 事件传播中，事件首先经过捕获阶段，然后再进入目标阶段，最后是冒泡阶段。通过使用 .capture 修饰符，我们就可以在捕获阶段处理事件。

让我们来看一个简单示例。在这个例子中，我们有一个父元素和一个子元素，当鼠标按下时，我们分别在捕获阶段和冒泡阶段处理事件，并在控制台中输出信息。

<template>
  <div>
    <!-- 使用 .capture 修饰符，在捕获阶段处理 mousedown 事件 -->
    <div @mousedown.capture="handleCaptureMouseDown">Capture Mouse Down (Parent)</div>
    
    <!-- 普通的 mousedown 事件处理，会在冒泡阶段触发 -->
    <div @mousedown="handleBubbleMouseDown">Bubble Mouse Down (Parent)</div>

    <!-- 子元素 -->
    <div @mousedown.capture="handleCaptureMouseDown">Capture Mouse Down (Child)</div>
  </div>
</template>

<script>
export default {
  methods: {
    handleCaptureMouseDown() {
      console.log("Capture phase: Mouse down event");
    },
    handleBubbleMouseDown() {
      console.log("Bubble phase: Mouse down event");
    },
  },
};
</script>

结果是这样的：

Capture phase: Mouse down event 
Capture phase: Mouse down event 
Bubble phase: Mouse down event

7. .self

修饰符 .self 只有在事件是从触发元素自身触发时才触发。它的主要作用就是确保事件只有在触发元素自身上时才会触发，而不是在它的子元素上触发。

<!-- 仅在点击元素自身时触发 click 事件 -->
<div @click.self="handleClick">Click me</div>

通过这个修饰符，我们只有在点击了这个 <div> 元素自身时，handleClick 方法才会被调用。如果点击了 <div> 内部的子元素，即使是在冒泡阶段，也不会触发 handleClick 方法。

这在一些我们需要确保事件只在元素自身上触发而不是其子元素上触发的时候很有用。比如说，我们可能希望在某个按钮上触发点击事件，但是不希望在按钮内的文本或其他子元素上触发相同的事件。这样我们使用 .self 修饰符就可以很容易地实现这种限制。

8. .once

修饰符 .once 表示事件将只会触发一次。这就不用多说了，不管点多少次，点击就只触发第一次。

<!-- 只触发一次的 mouseover 事件 -->
<div @mouseover.once="handleMouseOver">Mouse over me</div>

9. .native

修饰符 .native 用于在父组件监听子组件触发的原生事件。默认情况下，父组件无法直接监听子组件触发的原生 DOM 事件，但使用 .native 修饰符后，Vue 会自动将事件绑定到组件根元素上。

<!-- 在父组件中监听子组件触发的原生 click 事件 -->
<my-component @click.native="handleClick"></my-component>

这个修饰符的效果就是，当子组件触发了原生的 click 事件时，handleClick 方法会在父组件中被调用。默认情况下，Vue 会将 .native 修饰符应用到子组件的根元素上，使得父组件可以监听到该事件。

这对于假如我们需要在父组件中处理子组件触发的原生事件的情况下非常有用。比如说，如果子组件是一个包装了原生 HTML <button> 元素的 Vue 组件，而我们希望在父组件中监听按钮的点击事件的话，就可以使用 .native 修饰符。

10. .passive

修饰符 .passive 声明事件监听器永远不会调用 preventDefault()。

在移动端优化中，我们就会使用 .passive 修饰符。通过声明事件监听器不会调用 preventDefault()，就可以提高滚动事件的性能，因为这样的话浏览器可以更好地进行优化。

<!-- 在移动端优化中使用 .passive 修饰符 -->
<a @touchstart.prevent.passive="handleTouchStart">Touch me</a>

我们这样添加使用：

<div v-on:scroll.passive="onScroll">...</div>

在移动端，当我们在监听元素滚动事件的时候，它会一直出发onscroll事件，这样会导致我们的网页变卡，所以说当我们使用这个修饰符的时候，其实就相当于给onscroll事件添加了一个.lazy修饰符。

不过要记住.passive和.prevent是不可以一起使用的，这样使用的话.prevent就会被忽略，而且浏览器会打印一个警告。

11. 自定义修饰符

你也可以通过自定义修饰符来监听特定的鼠标按钮。

<!-- 仅在点击第四个鼠标按钮时触发事件 -->
<div @mousedown.4="handleFourthButton">Click me</div>

在这个例子中，.4 是就是自定义的修饰符，用来监听鼠标的第四个按钮（通常是中间的滚轮按钮）。这个修饰符不是 Vue 默认提供的，而是我们通过自定义的方式实现的。

如果要在 Vue 中定义自定义修饰符，我们需要在 Vue 的配置中使用 config.keyCodes。就像这样：

// 在 Vue 的配置中定义自定义修饰符
Vue.config.keyCodes = {
  '4': 65, // 将键码映射到鼠标按钮
};

// 在组件中使用自定义修饰符
export default {
  methods: {
    handleFourthButton() {
      console.log('Fourth mouse button clicked');
    },
  },
};

通过这样，我们将键码 65 映射到鼠标按钮 4。在模板中使用 @mousedown.4，Vue 就会根据键码映射来监听鼠标的第四个按钮。

这个例子中的键码 65 是一个示例，我们可以根据实际情况选择适合我们想要使用的键，设置对应的键码。要确保键码的选择与鼠标按钮的映射正确，才可以确保自定义修饰符的准确性。

总结

那么我的总结介绍就差不多啦，如果有一些细节问题没有提到，或者内容有误，欢迎各位大佬来教教我~

那么这篇文章就到这里结束啦~

如果你想了解更多这类文章，点赞关注作者更新更多~