Question

点击 div 时触发锚点点击

2018-11-16

1002

javascript jquery html

我有 div 元素，如果单击了 div，我想在内部 <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：超出最大调用堆栈大小，我该如何修复此问题？

Answer 1

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

eXcalibur

2018-11-16

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>