Vue+TSX场景下，事件修饰符的一些坑

2023-10-30 17:03:01

在使用Vue+TSX时，我们经常需要使用事件修饰符来简化事件处理。然而，在某些情况下，这些修饰符可能会导致一些意想不到的问题。本文将探讨在Vue+TSX场景下使用事件修饰符时可能遇到的问题，并通过分析源码来深入了解这些问题产生的原因。

三种实现Vue自定义右键方法的模式

为了更好地理解事件修饰符在Vue+TSX场景下的使用，我们将通过三种模式来实现Vue的自定义右键方法：

使用onContextmenu事件修饰符

<template>
  <div @contextmenu="handleContextMenu">
    右键点击我
  </div>
</template>

<script>
export default {
  methods: {
    handleContextMenu(event) {
      // 处理右键点击事件
    }
  }
}
</script>

使用v-on指令和修饰符

<template>
  <div v-on:contextmenu.stop="handleContextMenu">
    右键点击我
  </div>
</template>

<script>
export default {
  methods: {
    handleContextMenu(event) {
      // 处理右键点击事件
    }
  }
}
</script>

使用@click.right指令

<template>
  <div @click.right="handleContextMenu">
    右键点击我
  </div>
</template>

<script>
export default {
  methods: {
    handleContextMenu(event) {
      // 处理右键点击事件
    }
  }
}
</script>

事件修饰符可能遇到的问题

在使用上述三种模式实现Vue的自定义右键方法时，我们可能会遇到以下问题：

@click.right指令不起作用

在某些情况下，@click.right指令可能不起作用。这是因为Vue的点击事件系统会优先处理左键点击事件。因此，如果我们想使用@click.right指令来处理右键点击事件，我们需要在组件中显式地禁用左键点击事件。

stop修饰符不起作用

在某些情况下，stop修饰符可能不起作用。这是因为Vue的事件系统会自动阻止事件的默认行为。因此，如果我们想使用stop修饰符来阻止事件的默认行为，我们需要在组件中显式地启用事件的默认行为。

capture修饰符不起作用

在某些情况下，capture修饰符可能不起作用。这是因为Vue的事件系统会默认捕获所有事件。因此，如果我们想使用capture修饰符来捕获事件，我们需要在组件中显式地禁用事件的捕获。

分析源码理解问题产生的原因

为了深入理解上述问题产生的原因，我们可以分析Vue的源码。在Vue的源码中，我们可以找到以下代码：

export function createDOMListeners(node: VNodeDOM): VNodeData {
  const eventListeners = {};
  ...
  for (let i = 0; i < events.length; i++) {
    let name = events[i];
    ...
    if (modifiers) {
      if (modifiers.stop) {
        name = addEventListener(name, 'stoppropagation', event.preventDefault);
      } else if (modifiers.prevent) {
        name = addEventListener(name, 'preventDefault');
      } else if (modifiers.capture) {
        name = addEventListener(name, 'capture', event.preventDefault);
      }
    }
    eventListeners[name] = function() {
      handler.apply(vm, arguments);
    };
  }
  ...
  return eventListeners;
}