-
Notifications
You must be signed in to change notification settings - Fork 88
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.
Already on GitHub? Sign in to your account
How might we distinguish between click-outside and dragged-outside? #450
Comments
I guess I've figured out a way to solve this problem, based on: Modal is closed when cursor is released outside the modal after Chrome update (angularjs and bootstrap-ui) Stripped down, this is what I鈥檝e got now 鈥斅爃ope this might help others in the future :) Still happy for suggestions! <template>
<div class="modal">
<div class="modal__mask">
<div class="modal__wrapper">
<div v-click-outside="onClickOutside" class="modal__panel">
<div class="modal__container">
<slot />
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Modal",
data()
{
return {
preventClickOutside: false,
};
},
mounted()
{
window.addEventListener("keyup", this.onKeyUp);
window.addEventListener("mousedown", this.onMouseDown);
},
beforeDestroy()
{
window.removeEventListener("keyup", this.onKeyUp);
window.removeEventListener("mousedown", this.onMouseDown);
},
methods: {
onClickOutside()
{
if (this.preventClickOutside)
{
this.preventClickOutside = false;
return;
}
this.$emit("close");
},
onMouseDown(mouseEvent)
{
const modalMask = document.querySelector(".modal__mask");
this.preventClickOutside = mouseEvent.target !== modalMask;
},
},
};
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
馃憢 Hi there,
I鈥檝e got a form with a couple of input fields and textareas inside a modal. The modal has the v-click-outside directive setup to close the modal. This behaviour is well accepted by our users. However, there is one problem: if the user tries to select the text inside a prefilled input field and overshoots the input field as well as the modal and the pointer stops outside the modal, the modal is consequently closed.
Is there an elegant way to check whether the Pointer Event was the result of a dragging event?
The text was updated successfully, but these errors were encountered: