Как не обрабатывать клик, если нажатие кнопки мыши произошло над другим элементом?

Question

[Smeecy Smeecy]

Есть модальное окно с формой, которое закрывается по клику, за его пределами. Проблема заключается в следующем, например, когда мышью хочешь обвести данные в инпуте (например, чтобы стереть их), мышь часто уходит за пределы контейнера модального окна и отжатие кнопки мыши происходит за его пределами, вследствие чего модальное окно закрывается.
Как решить данную проблему?

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

Answer 1

[0xD34F]

Добавить в компонент модального окна свойство, которое будет указывать, начат ли процесс закрытия окна. Выставляется в true только по mousedown на корневом элементе, в остальных случаях сбрасывается. При событии mouseup на корневом элементе проверяется значение, если true - можно закрывать.

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

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

https://jsfiddle.net/3vkqm8sw/