时间戳

首页 > 解决方案 > 检查是否有办法在 querySelector 之后链接函数，即使它可能是空的？

javascript - 检查是否有办法在 querySelector 之后链接函数，即使它可能是空的？

问题描述

只是想看看是否有一种更简洁的方法可以使用 querySelector 而不使用 jQuery 来执行以下操作。

document.querySelector('#cancel-message').addEventListener('click', () => $("#accession_message").modal("hide"));

以上将在元素不存在的页面上引发“未定义”错误，我知道可以使用 jQuery 或仅执行以下操作来避免该问题：

x = document.querySelector('#cancel-message');
 if(x) {
   x.addEventListener('click', () => $("#accession_message").modal("hide")); 
 }

我想看看它是否可以使用vanilla javascript来完成，我想知道是否有一个javascript方法/函数可以在querySelector之后和'addEventListener'之前链接到它，这样它只会执行下一个链接函数如果元素存在并防止触发“未定义”错误。有这种事吗？？例如

document.querySelector('#cancel-message'). javacriptFunction() .addEventListener('click', () => $("#accession_message").modal("hide"));

标签： javascript

解决方案

一旦实现了可选链接（或者您使用 Babel 使用此插件转译您的代码），您可以使用?.：

document.querySelector('#cancel-message')?.addEventListener('click', () => $("#accession_message").modal("hide")); 
//                                       ^^

这样，如果querySelector计算结果为null，则整个表达式将计算结果为undefined，并且addEventListener不会被调用。

除此之外，没有办法避免if检查 vanilla Javascript。

（但不要害怕使用明确的if——更长的、可读的代码可以说比更短的、打高尔夫球的代码更好，其他一切都一样）

推荐阅读