javascript - Prevent click propagation outside of Quasar q-select - Stack Overflow

admin管理员组

文章数量:1310228

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?

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?

• javascript
• quasar-framework

Share Improve this question Follow asked Oct 2, 2018 at 10:34 user2943799user2943799 1,10133 gold badges1515 silver badges2929 bronze badges 3

• Looking at the Documentation for ponent select. It does not look like there is a way to prevent this behavior. I tried to make a workaround for this using an overlay and I could not get that to work either. I would say not possible at least not easily. Doc Link -> quasar-framework/ponents/select.html – Michael Warner Commented Oct 10, 2018 at 19:10
• Yes, that's my interpretation as well. I'm very surprised -- I would think that this would be the normal expected behaviour. – user2943799 Commented Oct 11, 2018 at 10:01
• You can submit a github issue with the project – Michael Warner Commented Oct 11, 2018 at 11:00

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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

It is a very mon 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://v2.vuejs/v2/guide/events.html#Event-Modifiers

In your case, the follow might suit your needs:

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

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/topic/2269/how-to-handle-both-click-on-whole-q-item-as-well-as-button-inside

If you don't want to propagate your q-select (or other Quasar ponents) click event to other elements, enclose it with a div with the following attributes:

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

本文标签： javascriptPrevent click propagation outside of Quasar qselectStack Overflow