Prevent click propagation outside of Quasar q-select

有些话、适合烂在心里 提交于 2021-02-07 13:34:18

问题


I'm using Quasar UI elements in a Vue.js project. For some pop-up elements, specifically q-select in this case, clicking outside of the q-select causes it to close. That's fine -- that's the behaviour I want, but the click event also propagates to the HTML element outside the q-select, which can lead to unexpected/unwanted behaviour. I would prefer that clicking outside of the q-select popup only closes the popup, and does not propagate to any other DOM elements. Is this behaviour supported by Quasar/q-select, or do I need to implement this myself?


回答1:


You can use one of the available Vue Event Modifiers to prevent, stop, or limit how events bubble up.

It is a very common need to call event.preventDefault() or event.stopPropagation() inside event handlers. Although we can do this easily inside methods, it would be better if the methods can be purely about data logic rather than having to deal with DOM event details.

To address this problem, Vue provides event modifiers for v-on. Recall that modifiers are directive postfixes denoted by a dot.

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

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

In your case, the follow might suit your needs:

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



回答2:


In my case (on a QCheckbox), I had to use @click.native.prevent instead of just @click.prevent. Then I was able to prevent the default click event on the checkbox and sub in my custom function. Also see 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/prevent-click-propagation-outside-of-quasar-q-select

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!