JavaScript событие onclick работает только как двойной щелчок

Question

Я пишу, потому что мне нужно решить эту проблему. До недавнего времени код работал просто отлично, и я использовал его довольно долгое время, но вчера, когда я тестировал страницу, все изменилось.

Идея состоит в том, чтобы нажать на изображение с якорный тег, который будет перенаправлять пользователя на другую страницу, и при этом должно появиться диалоговое окно подтверждения, чтобы спросить человека, хотят ли они этого. Я ничего не изменил в коде, поэтому я не понимаю, что происходит. Вот код:

// **JavaScript**
function confPopUp() {
  for (var i = 0; i < 6; i++) {
    document.getElementsByClassName("redPic")[i].onclick = redConf;
  }
}

function redConf() {
  var conf = confirm(
    "You're about to be redirected to our social media page. Do you accept?"
  );
  if (conf) {
    return true;
  } else {
    return false;
  }
}

window.onclick = confPopUp;

<!-- **HTML** //THERE ARE 5 MORE ELEMENTS WITH THE CLASS NAME "redPic". -->

<a href="https://www.madridsolutions.es" target="_blank"><img class="redPic" src="images/instagramLogo.png" alt="Instagram Logo"></a>

    
    
       

Проблема в том, что я тестирую его прямо сейчас, и он не работает должным образом, позавчера он работал нормально, только один клик и теперь он работает как двойной щелчок. Буду признателен за вашу помощь, спасибо.

Answer 1

Когда страница загружается в первый раз, вы устанавливаете обработчик событий single :

window.onclick=confPopUp;

Позже, когда в любом месте окна есть щелчок, запускается ваш confPopUp функция, которая подключает обработчики щелчков к элементам .redPic.

Позже, если вы щелкнете по элементу .redPic, ваша функция redConf запустится.

Если вы хотите .redPic элементов, чтобы их обработчики подключались при загрузке страницы, вызывайте confPopUp вместо того, чтобы делать это обработчиком кликов. Измените:

window.onclick=confPopUp;

на

confPopUp();

Убедитесь, что этот код работает после элементов .redPic. Есть несколько способов сделать это, выберите тот, который подходит вашим целевым браузерам и предпочтениям:

1. Поместите код в тег script в конце документа, непосредственно перед закрывающий тег </body>. Это работает со всеми браузерами, независимо от того, сколько лет.

2. В даже смутно современных браузерах вызовите confPopUp из обработчика событий DOMContentLoaded:

   document.addEventListener("DOMContentLoaded", confPopUp);
   

3. В современных браузерах добавьте атрибут defer к тегу script.

4. В современных браузерах добавьте type="module" к тегу script сделать ваш скрипт модулем. Это откладывает это так же, как defer, и переводит его в строгий режим (что является хорошей идеей) и помещает код в него в область видимости модуля, а не в глобальную область видимости (которая действительно переполнена).

---

Так почему же это сработало вчера? Предположительно, потому что вы щелкали по окну, не осознавая этого, вызывая тот начальный обработчик событий, который подключал элементы .redPic. Сегодня случилось так, что вы не щелкали окно до того, как пытались щелкнуть элемент .redPic, поэтому вы обнаружили эту проблему. Проблема была там все время.