jQuery Click（）錯誤-堆棧空間不足

Question

好吧，我被困在這里。 我有一個包含表的控件。 我允許用戶單擊底部行中的超鏈接直接轉到關聯的視圖。

另一方面，用戶可以單擊表內的其他任何位置，然后進行選擇。 該選擇將激活工具欄，該工具欄允許用戶對所選項目執行某些任務。 如果用戶再次單擊所選項目，則我要以編程方式單擊超鏈接。 但是，當我運行jQuery以編程方式單擊超鏈接時，我不斷收到“棧空間不足”錯誤。 我完全知道click事件是遞歸調用的，但是我不知道如何防止它！ 這是我的代碼...

<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>

此精簡版將充分展示該問題。 感謝任何能提供幫助的人！

Answer 1

問題在於，在元素的后代上觸發click事件也會在該元素上觸發它，因為該事件在DOM樹中冒泡。 由於您的代碼在處理其祖先的相同事件時會觸發后代的click事件，因此會發生無限遞歸。

解決此問題的一種方法是使用stopPropagation（）來防止在您的超鏈接上觸發的click事件冒泡：

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

編輯：但是，由於您的邏輯也駐留在祖先的事件處理程序中，因此上述代碼無法按預期工作。僅當當前正在處理的事件是在祖先元素或未在子元素上觸發的事件被觸發時，我們才可以切換問題的方法，並使用帶有is（）的 event.target來觸發后代超鏈接上的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');
    }
});

Answer 2

由於某些奇怪的原因，此解決方案有效。

更換：

$(this).find('a').click();

與：

window.location = $(this).find('a').attr('href');

FrédéricHamidi提供的代碼很棒，但是click（）從未發布回服務器。

Answer 3

似乎函數__doPostBack是未定義的，這可能是導致錯誤的原因

jQuery Click（）錯誤-堆棧空間不足

問題描述

3 個解決方案

解決方案1
8 2012-03-26 18:28:11

解決方案2
2 已采納 2012-03-27 04:08:02

解決方案3
0 2012-03-26 18:17:40

jQuery Click（）錯誤-堆棧空間不足

問題描述

3 個解決方案

解決方案1 8 2012-03-26 18:28:11

解決方案2 2 已采納 2012-03-27 04:08:02

解決方案3 0 2012-03-26 18:17:40

解決方案1
8 2012-03-26 18:28:11

解決方案2
2 已采納 2012-03-27 04:08:02

解決方案3
0 2012-03-26 18:17:40