Jquery Click() 错误 - 堆栈空间不足-6ren

Jquery Click() 错误 - 堆栈空间不足

转载作者：行者123 更新时间：2023-12-01 00:43:10

25

4

好吧，我被难住了。我有一个由表格组成的控件。我允许用户单击底行中的超链接直接转到关联的 View 。

另一方面，用户可以单击表内的任何其他位置并进行选择。此选择将激活一个工具栏，允许用户对所选项目执行一些任务。如果用户再次单击所选项目，我想以编程方式单击超链接。但是，当我运行 jQuery 以编程方式单击超链接时，我不断收到“堆栈空间不足”错误。我完全知道单击事件正在被递归调用，但我不知道如何防止它!这是我的代码...

<head runat="server">
<title></title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<style>
.mouseOver, .mouseOut, .selected
{
    width: 120px;
    height: 120px;
    text-align: center;
    vertical-align: top;
    display: inline-block;
    margin: 5px;
    cursor: pointer;

}
.mouseOver
{
    border: solid thin #99defd;
    background: #e9f8fe;
}
.mouseOut
{
    border: solid thin White;
}
.selected
{
    border: solid thin #e0a403;
    background: #f8f4de;
}
</style>

<script>
(function($) {
    $(document).ready(function() {
        var $items = $('.mouseOut');
        $items.mouseenter(function() {
            if ($(this).attr('class') != 'selected')
                $(this).attr('class', 'mouseOver');
        });
        $items.mouseleave(function() {
            if ($(this).attr('class') != 'selected')
                $(this).attr('class', 'mouseOut');
        });

        $items.click(function() {
            if ($(this).attr('class') == 'selected') {
                $(this).find('a').click();
            }
            else {
                $('.selected').attr('class', 'mouseOut');
                $(this).attr('class', 'selected');
            }
        });
    });
})(jQuery);
</script>
</head>
<body runat="server">
    <form id="form1" runat="server">
        <table cellpadding="5" class="mouseOut">
            <tr>
                <td>
                user module thumbnail...
                </td>
            </tr>
            <tr>
                <td>
                    <a id="A1" href="javascript:__doPostBack('ControlPanelHost1$cphCtrl0$lvCollectionView$ctrl0$lnkBtn','')">Users</a>
                </td>
            </tr>
        </table>

        <table cellpadding="5" class="mouseOut">
            <tr>
                <td>
                stats module thumbnail...
                </td>
            </tr>
            <tr>
                <td>
                    <a id="A2" href="javascript:__doPostBack('ControlPanelHost1$cphCtrl0$lvCollectionView$ctrl1$lnkBtn','')">Stats</a>
                </td>
            </tr>
        </table>
    </form>
</body>

这个精简版本将完整地演示该问题。感谢任何可以提供帮助的人!

最佳答案

问题在于，在某个元素的后代上触发 click 事件也会在该元素上触发该事件，因为该事件会在 DOM 树中向上冒泡。由于您的代码在处理其祖先上的相同事件时会触发后代的 click 事件，因此会发生无限递归。

解决此问题的一种方法是使用 stopPropagation()为了防止超链接上触发的 click 事件冒泡:

$(this).find("a").click(function(e) {
    e.stopPropagation();
});

编辑:但是，上面的代码不会按预期工作，因为您的逻辑也驻留在祖先的事件处理程序中。我们可以改变解决问题的方法并使用 event.target与 is()仅当我们当前处理的事件是在祖先元素或本身不是超链接的后代元素上触发时，才在后代超链接上触发 click 事件:

$items.click(function(event) {
    if ($(this).attr('class') == 'selected' && !$(event.target).is("a")) {
        $(this).find('a').click();
    } else {
        $('.selected').attr('class', 'mouseOut');
        $(this).attr('class', 'selected');
    }
});

关于Jquery Click() 错误 - 堆栈空间不足，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9875731/

25

4

0

文章推荐： jquery - 组件返回故障代码 : 0x805e0006 error

文章推荐： c# - 为什么我的事务不会对数据库进行更改？

文章推荐： Angular 2 : How do validate placeholder based on boolean condition

文章推荐： python - 现代 glTranslate 和 glRotate 的替代品是什么？

Web 堆栈 - 常见 Web 堆栈/环境的列表
出于好奇 - 我知道有 LAMP - Linux、Apache、MySQL 和 PHP。但是还有哪些其他 Web 堆栈替代方案的缩写呢？像 LAMR - Linux、Apache、MySQL Ruby
JavaScript 堆栈，LIFO 堆栈 : value not as expected
我有以下代码。 var stackMapIn = []; var stackMapOut = []; var stackBack = []; stackMapOut.push("m1"); $scop
amazon-web-services - 已删除 Cloudformation 堆栈，由于资源已存在，现在无法重新创建新的 Cloudformation 堆栈
我遇到了导致我的堆栈无法恢复的情况，我别无选择，只能将其删除。使用完全相同的模板，我继续创建了另一个同名的堆栈。 The following resource(s) failed to create:
ruby-on-rails - 与 Rails(堆栈)目录相比，MEAN(堆栈)Node.js 应用程序目录是什么样的？
这是我第一次查看 Node 堆栈，自从我学习使用 Ruby on Rails 进行 Web 开发以来，我对一些基本的东西有点困惑。我了解 Rails 目录是什么样的。 demo/ ..../app .
C语言使用深度优先搜索算法解决迷宫问题(堆栈)
本文实例讲述了C语言使用深度优先搜索算法解决迷宫问题。分享给大家供大家参考，具体如下：深度优先搜索伪代码（Pseudocode）如下： ?
项目特定位置的 Haskell 堆栈
我正在按照指南 here ，它告诉我: The stack setup will download the compiler if necessary in an isolatedlocation (
Haskell 堆栈，如何在全局范围内恢复在多个包中发现的模棱两可的模块名称
同时 trying to debug a different question ，我安装了一个似乎与我安装的其他一些软件包冲突的软件包。我跑了 $ stack install regex-pcre-
java - 我的java方法代码有什么问题？ - 堆栈
我花了几个小时创建了一个方法，该方法将从堆栈 s1 中获取 null 元素，并将它们放入 s2 中。然后该类应该打印堆栈。方法如下 import net.datastructures.ArraySta
java 堆栈 NullPointerException
我有一个类Floor，它有一个Stack block ，但我不知道如何初始化它。我曾尝试过这样的: public class Floor { private Stack stack;
具有元素限制的 Java 堆栈
我知道这个问题已经问过很多次了，但搜索一个小时后我仍然遇到问题。我想使用一个 lifo 堆栈，它可以存储最大数量的元素。达到最大数量后，首先删除该元素并将其替换为新元素，这样在第一次弹出时我可以获取
java - 谁能告诉我我做错了什么？ - 堆栈
我需要编写一个方法，压缩以执行以下操作；目标compress方法是从栈s1中移除所有null元素。剩余(非空)元素应按其初始顺序保留在 s1 上。辅助堆栈 s2 应用作s1 中元素的临时存储。在该方
JavaScript 堆栈、队列和事件循环？
我正在尝试验证以下代码发生的顺序。 function square(n) { return n * n; } setTimeout(function(){ console.log("H
c - 动态字符数组 - 堆栈
我需要一个字符数组，其中包含基于特定文件夹中文件数量的动态数量的字符数组。我能够通过初始化 char (*FullPathNames)[MAX_FILENAME_AND_PATHNAME_LENGTH
c++ - 堆栈/帧指针作为外部变量
我正在编写一些日志逻辑并想要进行一些缩进。了解是否存在任何函数调用或某个函数是否已完成的最简单方法是查看堆栈/帧的当前地址。让我们假设堆栈颠倒增长。然后，如果 log() 调用中的堆栈地址小于前一次调
c - 堆栈、数据和指令段在哪里实现？
所以内存分段在x86-64中被放弃了，但是当我们使用汇编时，我们可以在代码中指定.code和.data段/段，并且还有堆栈指针寄存器。还有堆栈段、数据段和代码段寄存器。代码/数据/堆栈的划分是如何
c# - 堆栈 - 值类型的值存储在哪里？
void main() { int x = 5; // stack-allocated Console.WriteLine(x); } 我知道 x 是堆栈分配的。但是关于 x 的堆栈中
Java 程序输出(堆栈)
这是我关于 SO 的第一个问题。这可能是一个愚蠢的问题，但到目前为止我还没弄明白。考虑下面的程序 Reader.java: public class Reader { public
Java 堆栈/嵌套计数
java中有没有一种快速的方法来获取嵌套/递归级别？我正在编写一个函数来创建组及其成员的列表。成员也可以是团体。我们最终可能会得到一组循环的组/成员。我想在某个任意级别停止。我知道我可以将变量保
c++ - 堆栈/堆分配数组的销毁顺序
考虑以下代码: struct A{...}; A a[100]; A* pa = new A[100]; delete[] pa; a/pa 元素的销毁顺序是由标准定义的还是实现定义的(对于第二种情况
具有多个值的 C++ 堆栈
我在下面有一些代码。此代码是一个基本的压入/弹出堆栈类，我将其创建为模板以允许某人压入/弹出堆栈。我有一个家庭作业，我现在要做的是创建一个具有多个值的堆栈。所以我希望能够创建一个基本上可以发送三个整

首页

博学

6Ren·AI

商城

Jquery Click() 错误 - 堆栈空间不足