在Vue中将多个事件绑定到v-on指令

在 jQuery 中，您可以通过执行以下操作来绑定多个事件：

$('#myDiv').on('touchstart mousedown', // more code here

据我了解，这会监听touchstart OR mousedown同时地。但我不知道如何用 Vue 做同样的事情。我只能做@touchstart="doSomething()" or @mousedown="doSomething()"。我错过了一些明显的事情吗？谢谢

1. 使用事件修饰符

如果你依赖events，你可以尝试绑定事件修饰符并将它们内联起来。就像是：

<a @click.stop="doThis" @click.right="showContextMenu"></a>

2. 以编程方式附加事件

或者，您可以创建事件列表及其各自的实现来附加并执行循环v-on，一种解决方法这个帖子:

created() {
    const EVENTS = [
      {name: 'my-event1', callback: () => console.log('event1')},
      {name: 'my-event2', callback: () => console.log('event2')},
      {name: 'my-event3', callback: () => console.log('event3')}
    ]

    for (let e of EVENTS) {
      this.$on(e.name, e.callback); // Add event listeners
    }
  }
  
<button @click="$emit('my-event1')">Raise event1</button>
<button @click="$emit('my-event2')">Raise event2</button>
<button @click="$emit('my-event3')">Raise event3</button>

3. v-on多个值

否则，就像你可以做的那样v-bind多个值，你实际上可以做同样的事情v-on对于事件。

<div id="mydDiv" v-on="handlers"></div>

// ...

data() {
  const vm = this;
  
  return {
    handlers: {
      mousedown: vm.divMousedown,
      touchstart: vm.divTouchstart
    }
  }
},

methods: {
  divMousedown() {
    console.log('event: mousedown');
  },
  divTouchstart() {
    console.log('event: touched');
  }
}

如果您需要按事件类型分解处理程序，请尝试检查type当事件被触发时，所以在你的情况下，因为touchstart似乎也触发mousedown， 也许：

methods: {
  onTouched(evt) {
    evt.preventDefault();

    if (evt.type === 'mousedown') {
        // handle mousedown
    }
    else if (evt.type === 'touchstart') {
        // ...
    }
  }
}

Note: 你可能想打电话preventDefault() on touchmove而不是touchstart。这样，鼠标事件仍然可以触发，并且链接之类的东西将继续工作。