仅在不考虑其填充的情况下在元素上触发 'click' 事件

Question

目标是仅当用户直接点击不包括其填充的元素时才在元素上触发 'click' 事件。因此，假设我们有这样的东西：

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

假设这些列表元素在同一行上对齐。因此，可能会出现用户单击位于这两个元素中间某处的 'space' 的情况，甚至更接近第二个元素。如果在这种情况下没有触发任何事件，而不是这两种情况中的任何一个，它会更直观。

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

Triggering a 'click' event on the element ONLY without taking its padding into account