How to not handle a click if the mouse button was pressed over another element?

Question

JavaScript

There is a modal window with a form that closes on click, outside of it. The problem is the following, for example, when you want to circle the data in the input with the mouse (for example, to erase it), the mouse often leaves the modal window container and the mouse button is released outside it, as a result of which the modal window closes.
How to solve this problem?

<div class="modal modal-actions" id="ModalActions" @click="closeModal">
    <div class="modal-container" @click.stop>
               </div>
</div>

Answer 1

Add a property to the modal window component that will indicate whether the process of closing the window has begun. Set to true only on mousedown on the root element, reset otherwise. At the mouseup event on the root element, the value is checked, if true - you can close it.

data: () => ({
  closing: false,
}),

<template>
  <div
    @mousedown="closing = $event.target === $el"
    @mouseup.self="closing && close()"
  >
    ...

https://jsfiddle.net/3vkqm8sw/