防止点击传播到Quasar q-select外部

Question

我正在Vue.js项目中使用Quasar UI元素。对于某些弹出元素，在这种情况下，尤其是q选择，在q选择之外单击会使其关闭。很好-这就是我想要的行为，但是click事件也会传播到q-select之外的HTML元素，这可能会导致意外/不必要的行为。我希望在q-select弹出窗口之外单击只会关闭弹出窗口，并且不会传播到任何其他DOM元素。 Quasar / q-select支持这种行为吗，还是我需要自己实现？

Answer 1

您可以使用可用的Vue事件修饰符之一来防止，停止或限制事件冒泡的方式。

  

在事件处理程序中调用event.preventDefault（）或event.stopPropagation（）是非常普遍的需求。尽管我们可以轻松地在方法内部执行此操作，但最好是这些方法可以纯粹与数据逻辑有关，而不要处理DOM事件详细信息。

     

为解决此问题，Vue为v-on提供了事件修饰符。回想一下修饰符是用点表示的指令后缀。

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

https://vuejs.org/v2/guide/events.html#Event-Modifiers

根据您的情况，以下内容可能会满足您的需求：

<q-select v-on:click.stop="doThis" />

Answer 2

在我的情况下（在QCheckbox上，我不得不使用@click.native.prevent而不是@click.prevent。然后，我可以在自定义函数的复选框和子菜单中阻止默认的click事件。另请参见https://forum.quasar-framework.org/topic/2269/how-to-handle-both-click-on-whole-q-item-as-well-as-button-inside