Javascript click可用于jQuery，但不能用于vanilla js

如果我使用jQuery并单击图标，它可以正常工作：

   $(document).on('click', '.fileuploader-action-sort', function() {
         alert('clicked');
    });

但是如果我使用vanilla js，我必须点击图标的最底部，就像在提示上一样，它才能真正工作，否则在点击实际图标的任何其他位置时都不会发生任何事情

document.body.addEventListener("click", e => {
        if (!e.target.matches(".fileuploader-action-sort")) return;
        alert('clicked');
    });

以下是html：

<a class="fileuploader-action fileuploader-action-sort" title="Sort"><i></i></a>

---

我根据数据库记录的数量生成图标，这就是为什么我没有使用

document.querySelector（'.fileuploader action sort'）

，因为如果单击div，则

e.target

引用vanilla js示例中的整个文档，如果单击div中的任何内容，则它引用

i

标记。但是在jQuery示例中，它引用了

.fileuploader操作排序
类

注意它的一种方法是
console.log（e.target）
：


document.body.addEventListener（“单击”，e=>{
console.log（例如target）
if（！e.target.matches（“.fileuploader action sort”））返回；
警报（“点击”）；
});
Test
，因为如果您单击div，则
e.target
指的是vanilla js示例中的整个文档，如果您单击div中的任何内容，则它指的是
i
标记。但是在jQuery示例中，它引用了
.fileuploader操作排序
类

注意它的一种方法是
console.log（e.target）
：


document.body.addEventListener（“单击”，e=>{
console.log（例如target）
if（！e.target.matches（“.fileuploader action sort”））返回；
警报（“点击”）；
});
Test
注意，您发布的代码片段在逻辑上是不等价的。问题是
e.target
是
i
不是
a
您需要检查
是否（！e.target.matches（.fileuploader action sort i”））返回@jcubic，谢谢你，它很有效。我曾经尝试过
a.fileuploader-action-sort
，但是你的方法更有意义。请注意，你发布的代码片段在逻辑上并不等价。问题是
e.target
是
I
不是
a
你需要检查
是否（！e.target.matches（.fileuploader-action-sort I））@jcubic，谢谢你，它很有效。我试过
a.fileuploader-action-sort
，但你的方法更有意义。谢谢你的解释，我很感激。@user8463989乐于帮助：-）谢谢你的解释，我很感激。@user8463989乐于帮助：-）