未捕获的 RangeError：超出最大调用堆栈大小答案

【问题标题】：Uncaught RangeError: Maximum call stack size exceeded未捕获的 RangeError：超出最大调用堆栈大小
【发布时间】：2014-08-01 11:54:31
【问题描述】：

我有一些模块，我希望它们是currsor:pointer，但不是<a> 标签，链接是这个块的孩子，这个块有.clicable 类，

所以我想做的是：如果单击了.clicable 元素，则阻止默认并单击第一个找到的子链接

$('section').on('click', '.clicable', function (e) {
    var $links = $(this).find('a');
    if( $links.length > 0 ) {
        $links.eq(0).click();   
    }
});

问题是我得到了这个控制台错误：

未捕获的 RangeError：超出最大调用堆栈大小

知道我错过了什么吗？

这是.clicable 元素之一的样子：

<div class="spa clicable " style="background-image:url(http://localhost:8096/files/Cachorro-1-camada-Izu-y-Sol-800x400.JPG);">
       <div>
         <p><a href="http://localhost:8096/spa">Category</a></p>
         <h4>Title</h4>
       </div>
</div>

我尝试添加这个：

$('.clicable a').on('click' , function (e) {
    console.log(true);
    e.stopPropagation();
});

但是这种方式没有收到错误，记录了 true 但页面没有转到链接位置

【问题讨论】：

函数无限调用自己。
@Hawk 但是为什么e.stopPropagation() 没有阻止呢？

标签： javascript jquery html

【解决方案1】：

直接在javascript中进行重定向而不是触发点击事件，因为这样可以避免整个冒泡递归的事情。

$('section').on('click', '.clicable', function (e) {
    var $links = $(this).find('a');
    if( $links.length > 0 ) {
        window.location.href = $links.get(0).href;
    }
});

通常没有理由在单击这样的父级时重定向，因为您应该只设置不同的锚点样式并单击它们而不需要任何 javascript 来重定向。

【讨论】：

【解决方案2】：

检查点击的是否是链接，如果不是，则查找链接。

$('section').on('click', '.clicable', function (e) {
    if (!$(e.target).is("a")) {
        $(this).find('a')[0].click();
    }
});

【讨论】：

【解决方案3】：

这里不满足条件。改变这个

if( $links.length > 0 )
{
    $links.eq(0).click;
}

到这里

if( $links.length > 0 )
{
    $links.eq(0).click;
    $links--;    // reduce size of links so that condition is met
}

不满足条件它会无限调用自己。

【讨论】：