个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-01 00:43:10 25 4
gpt4 key购买 nike

好吧，我被难住了。我有一个由表格组成的控件。我允许用户单击底行中的超链接直接转到关联的 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 的替代品是什么？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com