将click事件传递到容器中而不重新单击容器（javascript）

Question

我的情况是，我的导航菜单是一系列<ul>列表，其中第一个<li>是标签。我想在标签中制作整个<li>可点击而不是<a>标签。例如：

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

锚点是动态创建的，所以我需要保留这个结构。因此，我试图了解如何捕获<li>级别的点击事件，点击<a>标记上的点击，然后重新点击<li>级别的点击，导致递归。

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

我已经尝试过添加e.stopPropagation（）和preventDefault而没有正面结果。

Answer 1

为什么不使用CSS而不是使用CSS并使<a>成为块级元素，以便它填满列表项的整个空间？

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

这应该基本上使整个<li>可点击。但是，如果您使用CSS对li应用了特定的高度或填充值，则应将这些规则移至a的此选择器。

Answer 2

您可以将该功能复制到父级。这可能会有问题，这取决于您是否传递dom对象或引用相对于该函数中的参数的其他dom对象。我没有测试过这个，但它应该可以正常工作。

$('#home-link').each(function(){
    var func = this.onclick;
    this.parentNode.onclick = func;
    this.onclick = function(){ };
});