Question

在列表元素内触发 .click() 会产生错误

2016-05-17

79

javascript jquery

我有一个列表，其中可以包含纯文本或链接。如果有链接，则整个列表元素必须是可点击的。因此，当我执行此操作时：

if ($('.link').length) {
  $('li[data-contains-link]').on('click', function (e) {
      $('.link').click()    
  })
}

它给出了错误： Uncaught RangeError：超出最大调用堆栈大小

有什么方法可以避免这种情况？

Answer 1

您在点击事件之后引发点击事件 - 可能是递归调用。请确保 li[data-contains-link] 不是 .link ，否则将陷入无限循环。

Answer 2

$('.link') 位于 $('li[data-contains-link]') 内部

或者

某些 $('li[data-contains-link]') 具有类链接。

这会将您置于一个循环中，该循环监听点击，然后在自身或其子项之一上生成点击，从而进行递归。

Answer 3

尝试在 .link 的点击处理程序中添加 event.stopPropagation() ：

 $('li[data-contains-link]').on('click', function (e) {
    $('.link').click();    
 })

$('.link').on('click', function (e) {
    e.stopPropagation(); // <---addd it here.
    console.log('.link elem clicked!!!!');    
 })

由于此属性选择器 li[data-contains-link] 表明它是一个具有 .link 元素的父元素。由于您已在父元素上绑定了点击事件，并且正在触发子元素上的点击，因此会进行递归调用，从而导致错误： Uncaught RangeError: Maximum call stack size reached 。

这是由于 事件冒泡 造成的。 event.stopPropagation() 可用于停止事件冒泡到父元素，因此不会有任何递归调用，因为父元素不会获取事件。