Wrzuciłem na codepen kod, który nie działa tak jakbym tego chciał. Poniżej link do kodu.
https://codepen.io/marcif/pen/vYvQwMQ
Po najechaniu kursorem myszki na ikonkę "kosza" dostaję wartość "undefinied" z EventListener (obrazek 1) a gdy tylko wyjadę poza obszar ikonki to wartość jest już poprawna (obrazek 2). Czy ktoś podpowie mi jak to sensownie ogarnąć
Po pierwsze srcElement jest deprecated https://developer.mozilla.org/en-US/docs/Web/API/Event/srcElement
I używa się właściwości target.
Ale z target ci zadziała, bo na logikę przecież teraz ci działa dokładnie tak, jak powinno działać. Najeżdżasz na ikonkę, więc masz pod target tę ikonkę:
console.log(event.srcElement);
console.log(event.target);
wyświetli się dwa razy: <path d="M10.86 13.27a.4.4 0 0 1-.39.33H5.53a.4.4 0 0 1-.39-.29L3.87 5H2.46l1.3 8.53A1.8 1.8 0 0 0 5.53 15h4.94a1.8 1.8 0 0 0 1.77-1.47L13.54 5h-1.41zM13.1 2.2H11A1.39 1.39 0 0 0 9.61 1H6.39A1.39 1.39 0 0 0 5 2.2H2.9a.9.9 0 0 0-.9.9V4h12v-.9a.9.9 0 0 0-.9-.9z"></path> .
https://developer.mozilla.org/en-US/docs/Web/API/Event/target
Natomiast, żeby osiągnąć to, co chcesz zrobić, możesz użyć właściwości: currentTarget. Wtedy faktycznie dostaniesz element, do którego przywiązałeś zdarzenie (w odróżnieniu od target, który ci pokazuje, w którym elemencie faktycznie się pojawiło zdarzenie)
https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget
var ajaxUrl = event.currentTarget.dataset.ajaxUrl;
console.log(ajaxUrl);
console.log(event.currentTarget);
nawet po kliknięciu w ikonkę wyświetli się:
jakis_tam_URL
<a class="dz-remove" href data-modal="modal-two" data-ajax-url="jakis_tam_URL">…</a>
Alternatywnie możesz też rozwiązać sprawę na poziomie CSS, dając pointer-events: none; tym elementom, które nie chcesz, żeby emitowały zdarzenia typu mysz itp.
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
WOW Dzięki za tak szczegółowe wyjaśnienie zawiłości JS.
Użyłem jak pisałeś właściwości: currentTarget i działa dokładnie jak pisałeś i jak potrzebuję ;)