如何使点击事件仅在文本上触发（而不在同一元素内的其他空格上触发）

Question

我有一些固定的HTML（即我可以修改的HTML），只是一堆UL，其中包含一堆LI。我想向这些LI添加一个click事件处理程序，这些LI仅在用户单击它们内部的文本时触发...，而不是在用户单击文本右侧的空白时触发。

解决此问题的简单方法是使用display: inline-block或float:left使LI仅占用其内容的宽度。但是，如果我使用这些方法中的任一种，列出的项目太短就会堆积起来，而不是停留在自己的行上（即使使用clear:both也是如此）。另外，在UL之间散布着标题为H6的标签，如果我弄乱CSS，它们最终会变得分开而不是散布。

因此，理想情况下，我想找到一种纯JS方法，以某种方式检查单击是否发生在文本或空白上：

document.querySelectorAll('li').forEach(li =>
  li.addEventListener('click', e => {
    if (!wasClickOnText(e)) return;
    // rest of click handler
});

有什么技术可以创建wasClickOnText函数？