Как определить что клик и начат и закончен только в родительском элементе?

Question

[G2100636]

Компонент для модально окна:

<template>
    <div class="popup__backdrop" v-if="popup"
        @click="closePopup">
        <div class="popup" @click.stop>
            <CloseIcon class="close-btn" @click="closePopup"/>
            <component :is="popup.name"
                       v-bind="popup.props"
                       @close="closePopup"
            />
        </div>
    </div>
</template>

Метод для закрытия окна:

methods:{
    closePopup(e){
    	console.log(e)
        this.$store.commit('popups/closePopup');
    }
},

Проблема, что если пользователь нажал кнопку мыши в области .popup, удерживая нажатие увёл курсор в область фона .popup__backdrop и отпустил - то клик считается сделанным и срабатывает closePopup().
И наоборот если пользователь нажал в области фона .popup__backdrop и увел курсор в область .popup и отпустил - то клик тоже считается сделанным и срабатывает закрытие модалки.

Как сделать так, чтобы модалка закрывалась только если клик был полноценный в области .popup__backdrop? т.е. и нажал и отпустил кнопку мыши в области фона.

смотрел в консоли объект e.path[0] - там во всех трех способах клика значение: div.popup__backdrop

Answer 1

[G2100636]

Решил задачу вот так:

<template>
    <div class="popup__backdrop d-flex" v-if="popup"
         @mousedown="backdrop_mousedown = true"
         @mouseup="backdrop_mouseup_func"
    >
        <div class="popup"
             @click.stop
             @mousedown.stop
             @mouseup.stop
             @mouseup="backdrop_mousedown = false">
            <CloseIcon class="close-btn" @click="closePopup"/>
            <component :is="popup.name"
                       v-bind="popup.props"
                       @close="closePopup"
            />
        </div>
    </div>
</template>

data() {
    return {
        backdrop_mousedown: false,
        backdrop_mouseup: false,
    }
},
methods:{
    backdrop_mouseup_func(){
        if (this.backdrop_mousedown === true){
            this.$store.commit('popups/closePopup');
        }
        this.backdrop_mousedown = false;
        this.backdrop_mouseup = false;
    },
    closePopup(){
        this.$store.commit('popups/closePopup');
    },
},

Т.е. отдельно фиксируем mousedown и mouseup, И если mouseup для фона произошел именно после mousedown для фона, то тогда закрытие модалки.

Answer 2

[Антон Антон]

<CloseIcon class="close-btn" @click.stop="closePopup"/>

ну или

<div class="popup__backdrop" v-if="popup"
        @click.self="closePopup">

Comments

[G2100636]

<div class="popup__backdrop" v-if="popup" @click.self="closePopup">

вот это уже пробовал - ничего не поменялось.

<CloseIcon class="close-btn" @click.stop="closePopup"/>

а тут не понял причем тут кнопка CloseIcon? на всякий случай тоже попробовал, тоже ничего не поменялось)