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

问题描述

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

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

据我所知，这将同时监听 touchstart 或 mousedown.但是我不知道如何用 Vue 做等效的事情.我只能做 @touchstart="doSomething()" 或 @mousedown="doSomething()".我错过了一些明显的东西吗?谢谢

解决方案

1.使用事件修饰符

如果您依赖 events，您可以尝试使用 事件修饰符 并将它们串联起来.类似的东西:

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

2.以编程方式附加事件

或者，您可以创建事件列表及其各自的实现以附加并使用 v-on，来自这篇文章的解决方法:

created() {常量事件 = [{名称:'我的事件1'，回调:()=>console.log('event1')},{名称:'我的事件2'，回调:()=>console.log('event2')},{名称:'我的事件3'，回调:()=>console.log('event3')}]for (let e of EVENTS) {this.$on(e.name, e.callback);//添加事件监听器}}<button @click="$emit('my-event1')">引发 event1</button><button @click="$emit('my-event2')">引发 event2</button><button @click="$emit('my-event3')">引发 event3</button>

3.v-on 多个值

否则，就像你可以做的v-在多个值上绑定，你实际上可以用 v-on 为事件做同样的事情.

<div id="mydDiv" v-on="handlers"></div>//...数据() {const vm = 这个；返回 {处理程序:{mousedown: vm.divMousedown,触摸开始: vm.divTouchstart}}},方法: {divMousedown() {console.log('事件:鼠标按下');},divTouchstart() {console.log('事件:触摸');}}

<小时>

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

方法:{onTouched(evt) {evt.preventDefault();if (evt.type === 'mousedown') {//处理鼠标按下}否则如果(evt.type === 'touchstart'){//...}}}

<块引用>

注意:您可能想要调用 <touchmove 而不是 touchstart 上的 code>preventDefault().这样，鼠标事件仍然可以触发，链接之类的东西将继续有效.

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

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

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. 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. Attaching events programmatically

Or, you could create your list of events and their respective implementations to attach with and do the loop with v-on, a workaround from 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 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') {
        // ...
    }
  }
}

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屋！