How to make click fire only when fully pressed and released Vue?

Question

Vue.js

The problem is this - there is a modal (popup) and on its wrapper there is an event for closing the popup like this

<div v-if="isPopupTimeLine" @click.self="closeTimeLine">

But when I click in the body of the popup and accidentally move the mouse outside and release it there, the event will work, but I need it to work only when I clearly click on the wrapper and release it there. How to do it? And it’s very uncomfortable, you select the data inside, the mouse started by accident and op - the popup closed.

Answer 1

Hang the mousedown handler, in which you remember the target. When processing a click, check that the current target matches the remembered one - if so, then you can close the window.