在锚点上触发 click() 命令时出现“递归过多”错误答案

【问题标题】：'too much recursion' error when firing click() command on anchor在锚点上触发 click() 命令时出现“递归过多”错误
【发布时间】：2018-09-12 01:35:01
【问题描述】：

在我的代码中，我想点击 div 并让它在指定的元素 ID 上触发 click()，但是我却得到了这个递归错误，就像它处于无限循环中一样。

function clickLink(id) {
  $('#' + id).click();
}

.theDiv {
  border: 1px solid red;
  width: 200px;
  height: 200px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

click the div, but not on the link
<div class="theDiv" onclick="clickLink('linkId')">
  <a href="http://www.google.com" id="linkId">i am a link</a>
</div>

【问题讨论】：

你的问题是冒泡检查这个：medium.com/@vsvaibhav2016/…除此之外，我觉得你可以在不这样做的情况下完成你想要的任何地方。尝试使用display:block 设置a 的样式
我解释了我想要实现的目标。在 div 上有一个 onclick 事件，触发其中的链接。
@DanielWilliams 你试过我更新的答案了吗？我能够重现您的问题并解决它。
是的，谢谢

标签： javascript jquery

【解决方案1】：

由于事件冒泡，这实际上是一个无限循环。子元素上发生的事件将冒泡到父元素。在您的情况下，a#linkId 上发生的单击将冒泡到父 div 并触发 onclick 处理程序（再次“单击”a#linkId）。

【讨论】：

免费提示： OP 试图实现的是点击路由器。所以无论你在哪里点击，在 div 内，它都会触发锚点点击。为此，最干净的方法实际上可能是将 div 包裹在锚点内。但除此之外，很有可能查看 event.target 并决定是否应该发生路由。

【解决方案2】：

尝试使用 jquery 中的触发器

function clickLink(id) {
  $('#' + id).trigger(”click”);
}

【讨论】：

【解决方案3】：

试试这个：

function clickLink(id) {
    $('#' + id)[0].click();
}

可能仍然存在递归，但问题是您的点击功能不起作用。由于我们要离开页面（点击指向 google.com 的链接），所以这并不重要。

有关点击事件的解释，请参阅 Roman Starkov 的评论： How to trigger a click on a link using jQuery

【讨论】：

链接一定要在div里面。
@DanielWilliams 更新了我的答案。为什么它需要在 div 中？
如果点击发生在<a>上，仍然会触发两次。
我做了一些进一步的测试，并没有看到它被点击两次的证据（我尝试了控制台日志记录和警报）。
感谢您的澄清。我实际上已经放弃了这个想法，只是为 div 做一个 onclick。