7

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

4

2 回答 2

2

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

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

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

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

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

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

<q-select v-on:click.stop="doThis" />
于 2019-01-10T17:31:29.053 回答
1

在我的情况下（在 a 上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

于 2020-09-01T20:41:14.163 回答