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

iovurdzv 于 2022-12-25 发布在 Java

关注(0)|答案(2)|浏览(101)

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

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

锚点是动态创建的，所以我需要保持这种结构，所以我尝试苏斯如何在<li>级别捕获click事件，在<a>标签上触发onlick，而不需要在<li>级别重新触发click，从而导致递归。
我使用的是jQuery，但这在答案中是不必要的，甚至是不相关的。
我已经尝试添加e.stopPropagation()和preventDefault，但没有正面结果。

JavaScript

来源：https://stackoverflow.com/questions/1977095/passing-a-click-event-into-a-container-without-re-clicking-the-container

2条答案

按热度按时间

bf1o4zei1#

与其使用Javascript，为什么不利用CSS并使<a>成为块级元素，以便它填充列表项的整个空间呢？

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

这样就可以让整个<li>都可以点击，但是如果你用CSS给li设置了特定的高度或填充值，你应该把这些规则移到a的这个选择器中。

赞(0）回复(0）举报 2022-12-25

yqhsw0fo2#

你可以直接把函数复制到父函数。这可能会有问题，这取决于你是否传递了dom对象或者引用了其他与该函数中的参数相关的dom对象。我还没有测试过这个，但是它应该可以正常工作。

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

赞(0）回复(0）举报 2022-12-25

我来回答

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

2条答案

相关问题

热门标签

最新问答