防止在类星体 q 选择之外进行点击传播

Question

我在 Vue.js 项目中使用 Quasar UI 元素。对于某些弹出窗口元素，特别是在本例中为 q-select，在 q-select 外部单击会导致其关闭。这很好 - 这就是我想要的行为，但单击事件也会传播到 q-select 之外的 HTML 元素，这可能会导致意外/不需要的行为。我希望在 q-select 弹出窗口之外单击只会关闭弹出窗口，而不会传播到任何其他 DOM 元素。这种行为是否由类星体/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。然后，我能够在自定义函数中阻止复选框和 sub 上的默认单击事件。另请参阅 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(或其他类星体组件(单击事件传播到其他元素，请用具有以下属性的div 将其括起来：

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