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

新手上路,请多包涵

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

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

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

原文由 Ben Clarke 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 602
1 个回答

1.使用事件修饰符

如果您依赖 event s,您可以尝试与 事件修饰符 绑定并将它们内联链接。就像是:

 <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') {
        // ...
    }
  }
}

注意:您可能想在 preventDefault() touchmove 而不是 touchstart 。这样,鼠标事件仍然可以触发,链接之类的东西将继续工作。

原文由 Yom T. 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题