javascript - 仅在元素上触发 'click' 事件，而不考虑其填充

Question

目标是仅当用户直接单击元素(不包括其填充)时才触发元素上的“单击”事件。因此，假设我们有这样的东西:

<ul>
  <li>First element</li>
  <li>Second element</li>
<ul>

假设这些列表元素在同一行上对齐。因此，可能会出现这样的情况:用户单击这两个元素中间某个位置的“空间”，甚至更接近第二个元素。如果在这种情况下没有触发任何事件，那么比这两个事件中的任何一个都更直观。

Answer 1

在你的 HTML 包装中 <li> <span> 中的内容:

<ul>
  <li><span>First element</span></li>
  <li><span>Second element</span></li>
<ul>

在 CSS 中设置 <li> 的填充。例如:

li {
  padding: 20px;
}

并在你的JS中设置<span>的点击事件(不是<li>):

let firstElement = document.querySelector('li span');

firstElement.addEventListener('click', clickHandler);