javascript - 触发点击事件使浏览器崩溃

Question

检查此链接： jsfiddle 示例

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

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

Answer 1

因为在每一个click事件中，你都会click再次调用，从而导致永无止境的递归。

由于您的单击处理程序div与box类位于 s 上，因此单击这些 s 内的任何内容都会div导致.clickdiv

似乎您想要单击div以跟随链接？click您可以这样做，而不是在链接上触发 a ：

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();
});