이벤트 대상을 클릭하면 상위 요소가 아닌 요소 또는 하위 요소가 표시됩니다.

이벤트 대상을 클릭하면 상위 요소가 아닌 요소 또는 하위 요소가 표시됩니다.

다음 HTML 요소가 있습니다.

<div class="list-group">
    <a href="javascript:;" @click="showDetails(notification, $event)" class="list-group-item" v-for="notification in notifications" :key="notification.id">
        <h4 class="list-group-item-heading">{{ '{{ notification.title }}' }}</h4>
        <p class="list-group-item-text">{{ '{{ notification.created_at|moment }}' }}</p>
    </a>
</div>

그리고 이 Javascript:

return new Vue({
    methods: {
        showDetails: function (notification, event) {
          this.notification = notification

          console.info(event.target)
        }
    }
}

문제는 말이다event.target클릭하면 정확한 요소가 반환됩니다.즉, 이 경우,a요소 또는 그 중 하나의 자식(h4또는p).

어떻게 하면a요소(가 있는 요소)@click핸들러)를 클릭해도, 유저가 그 아이 중 하나를 클릭해도,

사용하다event.currentTarget청취자에게 첨부한 요소를 가리킵니다.이벤트가 버블이 되어도 변경되지 않습니다.

https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

CSS를 사용한 대체 솔루션:

a * {
    pointer-events: none;
}

요소는 포인터 이벤트의 대상이 되지 않지만 하위 요소에 포인터 이벤트가 다른 값으로 설정된 경우 포인터 이벤트의 대상이 될 수 있습니다.이러한 상황에서 포인터 이벤트는 이벤트 캡처/버블 단계 동안 하위 요소에서 오갈 때 이 부모 요소에서 이벤트 청취자를 트리거합니다.

참고 자료: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events#Values

언급URL : https://stackoverflow.com/questions/50149925/click-event-target-gives-element-or-its-child-not-parent-element