将多个事件绑定到Vue中的v-on指令 [英] Bind multiple events to v-on directive in Vue

问题描述

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

In jQuery you can bind multiple events by doing something like this:

$('#myDiv').on('touchstart mousedown'，//更多代码在这里

据我所知，它将同时监听 touchstart 或 mousedown .但是我不知道如何用Vue做同样的事情.我只能执行 @ touchstart ="doSomething()" 或 @ mousedown ="doSomething()" .我缺少明显的东西吗?谢谢

And as far as I understand this will listen for touchstart OR mousedown simultaneously. But I can't work out how to do the equivalent with Vue. I can only do @touchstart="doSomething()" or @mousedown="doSomething()". Am I missing something obvious? Thanks

推荐答案

1.带有事件修饰符

如果您依赖于 event ，则可以尝试使用事件修饰符，并以内联方式对其进行链接.像这样:

1. With Event Modifiers

If you are relying on events, you could try binding with event modifiers and sort of chain them inline. Something like:

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

2.以编程方式附加事件

或者，您可以创建事件列表及其各自的实现以附加并使用此帖子的解决方法:

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-将绑定到多个值上，您实际上可以使用 v-on 进行相同的操作.

3. v-on multiple values

Otherwise, just like you can do v-bind on multiple values, you can actually do the same with v-on for events.

<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');
  }
}

---

如果您需要按事件类型细分处理程序，请尝试检查

---

If you need to break down the handlers by type of event, try examining the type while the event is being fired, so in your case, since touchstart seems to also trigger mousedown, perhaps:

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

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

注意:您可能想致电<在 touchmove 上而不是在 touchstart 上使用code> preventDefault().这样，鼠标事件仍然可以触发，并且链接之类的东西将继续起作用.

Note: You might want to call preventDefault() on touchmove rather than touchstart. That way, mouse events can still fire and things like links will continue to work.

这篇关于将多个事件绑定到Vue中的v-on指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！