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

Question

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

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

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

Answer 1

1。使用事件修饰符

如果您依赖events，您可以尝试与event modifiers 绑定，然后将它们串联起来。比如：

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

2。以编程方式附加事件

或者，您可以创建事件列表及其各自的实现以附加并使用v-on 进行循环，这是this post 的一种解决方法：

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 on multiple values 一样，您实际上也可以使用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 while the event is being fired，因此在您的情况下，因为touchstart 似乎也会触发mousedown，也许：

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

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

Note：您可能想在touchmove 上调用preventDefault() 而不是touchstart。这样，鼠标事件仍然可以触发，并且链接之类的东西将继续工作。

Answer 2

不，您没有遗漏任何明显的东西。 “touchstart mousedown”是 jQuery 为方便起见而提供的简写符号。 Vue 没有提供类似的便利（可能是因为 attrs 的事件绑定语法对于所有提供的选项已经变得非常麻烦）。

正确的方法如您所说，使用两个单独的属性：@touchstart="doSomething()" or @mousedown="doSomething()"

Answer 3

vue 故意不支持绑定多个事件，因为inherent limitations in attribute names and the desire to avoid runtime overhead.

如果您绝对必须有多事件绑定，a custom directive would be the way to go。

（以下代码无耻地从链接的 JSFiddle 复制，因为 SO 不允许链接到答案中没有代码的小提琴）

function functionWrapper(e) {
  /* add filters to handle event type before propagating to callback function for custom event handler */
  e.target.__handler__.fn(e)
}

Vue.directive('multiEvent', {
  bind: function(el, binding, vnode) {
    el.__handler__ = binding.value
    binding.value.evt.forEach(e => el.addEventListener(e, functionWrapper))
  },
  unbind: function(el, binding) {
    el.__handler__.evt.forEach(e => el.removeEventListener(e, functionWrapper))
    el.__handler__ = null
  }
})

用法：

<input v-multi-event="{ evt: ['click', 'blur', 'change', 'keydown'], fn: someCallback }">