Question

单击div时，我希望内部链接触发click事件。但控制台显示click事件一直触发，直到浏览器崩溃。为什么会这样？最新解决方案是什么？

真正的div有很多内容，所以我不希望<a>标记覆盖整个div或将div包装在<a>标记内。此功能适用于移动设备。

Answer 1

因为在每个click事件中，您再次调用click，导致永不结束的递归。

由于您的点击处理程序位于div类box上，因此点击这些div内的任何内容都会导致click事件div }}

您似乎想要点击div来关注该链接？您可以这样做，而不是在链接上触发click：

window.location = $(this).find(".link").attr("href");

Answer 2

试试这个。它会停止无限循环。但更好的问题是为什么这样做？

$(".box").click(function(e){
    console.log("clicked");
    $(this).find(".link").trigger("click");
});

$(".link").click(function(e){
    e.stopPropagation();
});

Answer 3

当您触发点击“.link”时，该事件会冒泡到其父级，并最终再次达到“.box”。因此进入递归。为了防止这种情况，您可以执行类似

的操作

$(".box").click(function(e){
    if(e.currentTarget == e.target)
    {    
        console.log("clicked");
        $(this).find(".link").trigger("click");
    }
});

e.target是发生事件的元素，e.currentTarget是绑定事件的元素。

另一种替代解决方案是（推荐），

$(".box").click(function(e){
    console.log("clicked");
    $(this).find(".link").trigger("click");       
});
$(".link").click(function (e)
{
    /*This would prevent a click triggered on ".link" to propagate upto its parent i.e ".box" */
    e.stopPropagation();
});

触发点击事件会导致浏览器崩溃

3 个答案: