0

contents.addEventListener('click', function(e){
  let target = e.target;
  if(target.tagName != 'A' ){
    return false
  }
   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>

  1. Сделайте так, чтобы при клике на ссылки внутри элемента id="contents" пользователю выводился вопрос о том, действительно ли он хочет покинуть страницу, и если он не хочет, то прерывать переход по ссылке.
  2. У меня правильное решение ?!
7
  • Вы же видите, что нет.
    – user176262
    Commented 28 окт. 2019 в 2:25
  • @Igor почему ? клик по ссылке появляется вопрос и если ответ true то переход
    – user354190
    Commented 28 окт. 2019 в 2:27
  • @Igor догнал скрипт работает только на 1 ссылку так получается ?
    – user354190
    Commented 28 окт. 2019 в 2:28
  • Он у вас работает правильно, единственное, касательно 2 ссылки - вы там кликаете на <i>, отсюда и не правильно срабатывает
    – InDevX
    Commented 28 окт. 2019 в 3:10
  • 1
    Интересно, а где такой код может пригодится?) Если можно просто добавить ссылке target="_blank" и при клике пользователь и так не будет "покидать" страницу. Commented 28 окт. 2019 в 3:55

1 ответ 1

3

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>

2
  • У Вас опечатка совадающий исправьте пожалуйста для красоты
    – user354190
    Commented 28 окт. 2019 в 6:27
  • а так спасибо за развернутый ответ
    – user354190
    Commented 28 окт. 2019 в 6:31

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.