如何区分LI（div）中的点击和A链接上的点击？

Question

我在LI元素中有一个链接，例如

<li class='app-context-menu'>
   <a href="http://website.com" class='app-context-link'>http://website.com</a>
</li>

现在，如果用户点击LI元素或链接，他们会转发到链接。

我想要的是只有当他们点击链接本身时才会转发到链接。

知道如何做到这一点吗？

谢谢！

Answer 1

将a上的填充内容移至li。将它放在a上使其可点击区域覆盖了li。因此，a应该padding: 0;（或更改为display: inline;，如另一个答案中所述）。然后将相关填充添加到li。您还需要确保为li或父元素提供背景颜色。

Answer 2

使用CSS，您可以强制执行单击两次以关注li或任何其他元素中的链接。 你需要的是

1. <a>已包含在已设置属性tabindex的元素中。
2. pointer-events设置为none
上的<a>
3. 一旦包装器具有焦点或已被点击，就将pointer-events重置为normal。

DEMO with submenu 基本HTML是：

<ul>
   <li tabindex="0">
       <a href="#"> link </a><!-- whatever, sub items, ...-->
   </li>
</ul>

基本CSS是：

a {pointer-events:none;}
li:focus a {pointer-events:auto;}

当浏览器理解pointer-events规则时，这当然有效。