javascript - 在不重新单击容器的情况下将单击事件传递到容器中

Question

我有一个导航菜单是一系列 <ul> 的情况列出第一个 <li>其中有一个选项卡。我想制作整个 <li>可点击而不是 <a>选项卡内的标记。例如:

<ul id="home">
    <li id="navtab">
        <a id="home-link" onclick="doHome();">HOME</a>
    </li>
</ul>

anchor 是动态创建的，所以我需要保留这个结构。所以我想弄清楚如何在 <li> 处捕获点击事件。水平，开火onlick在 <a> 上标记 WITHOUT 然后重新点击 <li>级别并导致递归。

我正在使用 jQuery，但这在答案中不是必需的，甚至是不相关的。

我已经尝试添加 e.stopPropagation()和 preventDefault无阳性结果。

Answer 1

为什么不使用 CSS 而不是使用 Javascript 而制作 <a>一个 block 级元素，以便它填满列表项的整个空间？

#home li a {
  border:solid 1px #000;
  display:block;
}

这应该基本上使整个 <li>可点击。但是，如果您将特定的高度或填充值应用于 li使用 CSS，您应该将这些规则向下移动到 a 的选择器中.