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

时间:2013-03-27 13:59:57

标签: javascript jquery

检查此链接: jsfiddle example

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

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

3 个答案:

答案 0 :(得分:5)

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

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

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

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

答案 1 :(得分:2)

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

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

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

答案 2 :(得分:0)

当您触发点击“.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();
});