e.target
— тот элемент, на который кликнули. В случае со второй ссылкой, клик происходит по элементу <i></i>
, поэтому условие не срабатывает.
e.target.closest('a')
— вместо 'a' может быть любой другой CSS-селектор. Если среди кликнутого элемента и всеми его родителями находится элемент, совпадающий с селектором - возвращается он, иначе - null
.
contents.addEventListener('click', function(e) {
if ( e.target.closest('a') ) {
let targetA = confirm('Хотите покинуть страницу?');
return targetA ? true : e.preventDefault();
}
})
<fieldset id="contents">
<legend>#contents</legend>
<p>
Как насчёт того, чтобы прочитать <a href="http://wikipedia.org">Википедию</a> или посетить <a href="http://w3.org"><i>W3.org</i></a> и узнать о современных стандартах?
</p>
</fieldset>
Но этот код будет красивее с onclick
, потому что e.preventDefault()
— для addEventListener. А его аналог для onсобытий — return false;
А confirm как-раз возвращает true или false)
contents.onclick = function(e) {
if ( e.target.closest('a') ) {
return confirm('Хотите покинуть страницу?');
}
}
<fieldset id="contents">
<legend>#contents</legend>
<p>
Как насчёт того, чтобы прочитать <a href="http://wikipedia.org">Википедию</a> или посетить <a href="http://w3.org"><i>W3.org</i></a> и узнать о современных стандартах?
</p>
</fieldset>
target="_blank"
и при клике пользователь и так не будет "покидать" страницу.