仅在元素上触发“点击”事件，而不考虑其填充

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;
}

在<span>的JS set click事件中（不是<li>）：

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

firstElement.addEventListener('click', clickHandler);