Question

如果我使用jQuery并单击图标，则效果很好：

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

但是，如果我使用普通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');

Answer 1

因为如果您单击div，e.target指的是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>

click适用于jQuery，但不适用于香草js

1 个答案: