触发点击事件使浏览器崩溃答案

【问题标题】：Triggering click event crashes the browser触发点击事件使浏览器崩溃
【发布时间】：2013-03-27 22:13:45
【问题描述】：

检查此链接： jsfiddle example

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

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

【问题讨论】：

触发<a>元素点击事件的目标是什么？
时间戳：27/03/2013 19:34:06 错误：递归过多源文件：code.jquery.com/jquery-1.9.1.js 行：2749

标签： javascript jquery

【解决方案1】：

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

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

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

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

【讨论】：

@VisioN 我认为递归将是您希望循环发生的时候。另外，没有基本情况。
@G_M 这不是循环；该函数本质上是调用自身，所以这就是递归。缺乏基本情况是导致问题的原因：它会无限递归。
是的，还值得用为什么递归发生。

【解决方案2】：

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

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

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

【讨论】：

或者，你知道，只是不要调用$(this).find(".link").trigger("click"); 行，因为它完全没有任何作用。
哈哈，真的。但不是没有人有时间处理这些逻辑问题。

【解决方案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();
});

【讨论】：