防止点击在 Quasar q-select 之外传播

Question

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

Answer 1

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

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 非常常见。 虽然我们可以在方法内部轻松地做到这一点，但如果方法可以纯粹是关于数据逻辑而不是必须处理 DOM 事件细节会更好。

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

• 。停止
• 。防止
• 。捕获
• 。自己
• 。一次
• 。被动的

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

在您的情况下，以下可能适合您的需求：

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

Answer 2

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

Answer 3

如果您不想将 q-select（或其他 Quasar 组件）单击事件传播到其他元素，请使用具有以下属性的 div 将其括起来：

<div @click.stop @keypress.stop>
</div>