触发锚点点击 div 点击答案

【问题标题】：Trigger anchor click on div click触发锚点点击 div 点击
【发布时间】：2018-11-16 17:48:48
【问题描述】：

我有 div 元素，如果点击了 div，我想在 inner<a></a> 标签上触发点击事件。我需要这样做，因为锚标签的点击功能上有验证功能，它们不是我渲染的。

这是我的做法：

$('.wrapperDiv').on('click', function(e) {
    e.stopPropagation();
    $(e.currentTarget).find('.link').trigger('click');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <div class="wrapperDiv">
      <a class="link" href="https://google.com/" target="_self">Test A</a>
    </div>

  </li>
  <li>
    <div class="wrapperDiv">
      <a class="link" href="https://bing.com/" target="_blank">Test B</a>
    </div>
  </li>
</ul>

为什么我会收到 Uncaught RangeError: Maximum call stack size exceeded 以及如何解决这个问题？

【问题讨论】：

顺便说一句，它是锚，anker 只是一个德语单词。 ;-)
您收到此错误，因为您以编程方式在锚元素上触发的点击也被 div 元素拾取（这就是点击事件的工作方式）。除了单击元素之外，您可以通过其他方式调用验证函数吗？
@cloned 不仅是德语，也是荷兰语：)
您每天都会学到新东西。谢谢@thomaux

标签： javascript jquery html

【解决方案1】：

尝试在e.stopPropagation();之后添加e.preventDefault();

【讨论】：

【解决方案2】：

stopPropagation()只防止触发父元素点击，用div点击即可：

$('.wrapperDiv').on('click', function(e) {
    e.stopPropagation();
    var link = $(e.currentTarget).find('.link')
    var win = window.open(link.attr('href'), link.attr('target'));
    win.focus();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <div class="wrapperDiv">
      <a class="link" href="https://google.com/" target="_self">Test A</a>
    </div>

  </li>
  <li>
    <div class="wrapperDiv">
      <a class="link" href="https://bing.com/" target="_blank">Test B</a>
    </div>
  </li>
</ul>

【讨论】：