时间戳

首页 > 解决方案 > click 适用于 jQuery 但不适用于 vanilla js

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');

标签： javascriptjquery

解决方案

因为e.target如果您单击 div，它指的是您的 vanilla js 示例中的整个文档，i如果您单击其中的任何内容，它指的是标签。但在 jQuery 示例中，它指的是.fileuploader-action-sort类。

注意到它的一种方法是console.log(e.target)：

document.body.addEventListener("click", e => {
  console.log(e.target)
  if (!e.target.matches(".fileuploader-action-sort")) return;
  alert('clicked');
});
<a class="fileuploader-action fileuploader-action-sort" title="Sort"><i>Test</i></a>

所以你需要听i标签而不是类本身：

document.body.addEventListener("click", e => {
  if (!e.target.matches(".fileuploader-action-sort i")) return;
  alert('clicked');
});
<a class="fileuploader-action fileuploader-action-sort" title="Sort"><i>Test</i></a>

推荐阅读