如何使用 if 语句检查单击元素的 querySelector 是否正确？ [关闭]答案

【问题标题】：How can I check if the querySelector of a clicked element is correct using if statement? [closed]如何使用 if 语句检查单击元素的 querySelector 是否正确？ [关闭]
【发布时间】：2020-11-27 12:44:08
【问题描述】：

第一篇文章在这里。我试图使用 if 语句进行一些测试来触发Alert，例如，当网站上有很多 WhatsApp 按钮，但其规格有所不同时。所以我尝试运行这段代码：

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

但此代码不起作用，它不会在控制台上返回错误，但不会触发 console.log

你们知道这段代码有什么问题，或者是否有办法在if 语句上验证单击按钮的querySelector？

【问题讨论】：

请添加minimal reproducible example（-> 为这些“按钮”中的 1 个或 2 个添加相关标记）最好是 runnable snippet <>
event.target 引用的节点很可能没有任何与您的 querySelector 匹配的子节点。你可以试试event.target.parentNode
试试Element.matches
stackoverflow.com/questions/3304638/…

标签： javascript if-statement queryselector

【解决方案1】：

我想，你误解了querySelector 的用途。此方法返回第一个子元素，其选择器与您作为参数传递的选择器匹配。

也许，您不想将addEventListener 指向window 对象，然后捕获所有传播的点击事件。取而代之的是，尝试通过document.querySelector 和addEventListener 直接找到您的whatsApp 按钮。比如：

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

querySelector documentation

【讨论】：