Uncaught RangeError : 超出最大调用堆栈大小

Question

给定以下 jQuery 函数。

$(document).on("click", ".subMenu>a", function(event) {

    $(this).closest("a").attr("href", "../public_resources/Category.jsf?id=5").trigger('click');
});

当点击<li> 中的<span> 时调用此函数，如下所示。

<li class="ui-widget ui-menuitem ui-corner-all ui-menu-parent subMenu" role="menuitem" aria-haspopup="true">

    <a href="../public_resources/Category.jsf?id=5" class="ui-menuitem-link ui-submenu-link ui-corner-all" tabindex="-1">
        <span class="ui-menuitem-icon ui-icon ui-icon-contact"></span><span class="ui-menuitem-text">Occassion</span>
    </a>

</li>

可以看出，给定的 jQuery 函数由 CSS 类 subMenu 映射（在 <li> 中）。当这个函数被调用时（当一个被<li>标签包围的区域被点击时），锚标签在这个函数中被赋予一个期望的URL，这反过来又触发一个点击事件，导致相同的函数被再次调用 - 最终导致无限递归并出现以下错误。

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

有没有办法避免这种递归，可能是通过某种方式重写函数？

这里给出的 HTML 代码是由 UI 框架生成的，不太可能接触到它。

我可以使用window.location 而不是.trigger('click')，但是当用户按住ctrl 键单击子菜单时，页面应该在新选项卡中打开。使用window.location 不会发生这种情况。

Answer 1

试试这个：

var a=0;
$(document).on("click", ".subMenu>a", function(event) {
    a++;
    if(a<=1){
    $(this).closest("a").attr("href", "../public_resources/Category.jsf?id=5").trigger('click');
    }else{
        a--;
    }
});

如果不想涉及全局变量，可以使用：

$(document).on("click", ".subMenu>a", function(event) {
    if($(this).attr('data-clicked')) return true;
    $(this).closest("a").attr("href", "../public_resources/Category.jsf?id=5").attr('data-clicked',true).trigger('click');
});

Answer 2

使用 javascript 触发点击，它将绕过处理程序：

$(this).closest("a").attr("href", "www.google.com")[0].click();

Answer 3

使用.trigger，您可以传递参数。尝试这样的事情：

$(document).on("click", ".subMenu>a", function(event, _ISTRIGGER_) {
    if(_ISTRIGGER_) return;

    $(this).closest("a").attr("href", "../public_resources/Category.jsf?id=5").trigger('click', true);
});

但请注意，.trigger 不会激活默认行为。在做

$(this).closest("a").attr("href", "../public_resources/Category.jsf?id=5")[0].click();

将激活它。

Answer 4

当点击<li> 中的<span> 时调用此函数，如下所示。

不，不是，这是您代码中的致命缺陷。

$(document).on("click", ".subMenu>a", function(event) {

当点击<a> 时调用您的代码，而不是<span>。由于您触发了对链接的单击，因此再次调用事件处理程序。然后再次。再一次，直到你用完堆栈空间。堆栈溢出！

要修复，只需修复您的选择器：.subMenu>a>span