Как не обрабатывать нажатия по SVG?

Question

[JoyRax]

Здраствуйте, я ставлю обработчик click на div, у него дочерние елементы clickEl -> div -> svg -> path, так как у меня svg занимает почти всю площю clickEl в e.target попадает path елемент, а мне нужно при клике получать id clickEl

Здесь в коде

<font-awesome-icon :icon="['fas', 'user-circle']" />

ставится svg

<div class="NavBar_Menu_Dopdown">
            <div v-on:click="DropdownClick('NBMD_User')" id="NBMD_User-Button" class="NavBar_Menu_Dopdown_Button">
                <div class="NavBar_Menu-icon" user-icon>
                    <font-awesome-icon :icon="['fas', 'user-circle']" /> 
                </div>
            </div>
            <div id="NBMD_User" class="NavBar_Menu_Dopdown_List">
                <div class="NavBar_Menu_Dopdown_Item">
                    <div class="NavBar_Menu_Dopdown_Button">
                        <img class="NBMD-userAvatar" src="../../assets/images/avatar.jpg">
                        <span class="NBMD-userName">JoyRax</span>
                    </div>
                </div>
                <div class="NavBar_Menu_Dopdown_Item">
                    <div class="NavBar_Menu_Dopdown_Item_Button">Exit</div>
                </div>
            </div>
        </div>

window.onclick = (e) => {
        let dropdowns = [
            { btn: 'NBMD_User-Button', list: 'NBMD_User' }
        ]

        console.log(e)
        dropdowns.forEach((item) => {
            if (!e.target.matches(`#${item.btn}`)) {
                let elList = document.getElementById(item.list)
                if (elList.classList.contains('SHOW')) {
                    elList.classList.remove('SHOW')
                }
            }
        })
    }

Comments

[iBird Rose]

задай для svg {pointer-events: none;}

[Aetae]

У тебя же vue судя по коду, нахрена ты вообще полез руками обработчки ставить?

Answer 1

[Metotron0]

Например, на клик по SVG вызвать stopPropagation()