防止点击传播到Quasar q-select之外
我在一个Vue.js项目中使用了Quasar UI元素。对于某些弹出元素，特别是本例中的q-select，在q-select之外单击会导致其关闭。这很好--这就是我想要的行为，但是click事件也会传播到q-select之外的HTML元素，这可能导致意外/不想要的行为。我希望在q-select弹出窗口之外单击只会关闭弹出窗口，而不会传播到任何其他DOM元素。Quasar/q-select是否支持此行为，或者我是否需要自己实现此行为？
回答 2
Stack Overflow用户
发布于 2019-01-11 01:31:29
您可以使用其中一个可用的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" />Stack Overflow用户
发布于 2020-09-02 04:41:14
在我的例子中(在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
https://stackoverflow.com/questions/52606626
复制相似问题
腾讯云开发者
