触发锚点单击div单击

Question

我有div元素，如果单击了div，我想在内部<a></a>标记上触发click事件。我需要这样做，因为锚标记的click功能上有验证功能，而这些功能不是我提供的。

这是我的方法：

$('.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：超出最大调用堆栈大小的问题，我该如何解决？

Answer 1

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

Answer 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>