Как я могу проверить правильность выбора querySelector элемента, на который нажали, с помощью инструкции if?

первый пост здесь. Я пытался провести некоторые тесты, используя оператор if для запуска Alert, например, когда на веб-сайте много кнопок WhatsApp, но с разницей в спецификациях. Итак, я попытался запустить этот код:

window.addEventListener('click', function(event){
    if(event.target.querySelector('a[href*="whatsapp.com"]')){
        console.log('Hey WhatsApp!')
    }
})

Но этот код не работает, он не возвращает ошибку в консоли, но и не запускает console.log

Вы, ребята, знаете, что не так с этим кодом, или есть ли способ проверить в операторе if querySelector нажатой кнопки?


person William R. Sousa    schedule 27.11.2020    source источник
comment
Пожалуйста, добавьте минимальный воспроизводимый пример (-> добавьте соответствующую разметку для 1 или 2 из этих кнопок), предпочтительно как < a href="https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do"> работающий фрагмент <>   -  person Andreas    schedule 27.11.2020
comment
Скорее всего, у узла, на который ссылается event.target, нет дочерних элементов, соответствующих вашему querySelector. Вы можете попробовать с event.target.parentNode   -  person IVO GELOV    schedule 27.11.2020
comment
Попробуйте Element.matches   -  person James    schedule 27.11.2020
comment
stackoverflow.com/ вопросы/3304638/   -  person CBroe    schedule 27.11.2020


Ответы (1)


Я думаю, вы неправильно понимаете, для чего используется querySelector. Этот метод возвращает первый дочерний элемент, селектор которого совпадает с тем, который вы передали в качестве аргумента.

Возможно, вы не хотите addEventListener обращаться к объекту window, а затем перехватывать все распространяемые события кликов. Вместо этого попробуйте найти свою кнопку WhatsApp через document.querySelector и addEventListener прямо к ней. Что-то вроде:

const whatsApp = document.querySelector('a[href*="whatsapp.com"]')
whatsApp.addEventListener('click', ev => {
  console.log('Hey WhatsApp!')
})

документация по querySelector

person nate river    schedule 27.11.2020