Question

我有一些模块，我希望它们是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，但页面不会转到链接位置

Answer 1

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

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

通常没有理由在点击像这样的父级时重定向，因为你应该用不同的方式设置锚点的样式，而不需要任何javascript重定向就可以点击它们。

Answer 2

检查点击的内容是否为链接，如果没有，则查找链接。

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

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

如果你不满足条件，它会自我调用。

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

3 个答案: