jQuery 触发点击给出“太多递归”

Question

我正在尝试使文章的链接在整个文章空间上都可单击。

首先，我做了悬停操作，改变鼠标悬停时的颜色等等......然后单击它应该触发链接，但这给出了“太多的递归”。

我认为这是一个事件冒泡问题。我尝试使用 event.cancelBubble = true; 或 stopPropagation() 但没有成功。运气更差！

有人吗？

    $("div.boxContent").each(function() {
        if ($(this).find(".btn").length) {

            var $fade = $(this).find("div.btn a > span.hover");
            var $title = $(this).find("h1, h2, h3, h4, h5");
            var $span = $(this).find("span").not("span.hover");
            var $text = $(this).find("p");

            var titleColor = $title.css('color');
            var spanColor = $span.css('color');

            $(this).css({'cursor':'pointer'}).bind({
                mouseenter:function() {
                    $text.stop().animate({color:linkHover},textAnim);
                    $title.stop().animate({color:linkHover},textAnim);
                    $span.stop().animate({color:linkHover},textAnim);
                    $fade.stop(true,true).fadeIn(textAnim);
                }, mouseleave:function() {
                    $text.stop().animate({color:linkColor},textAnim);
                    $title.stop().animate({color:titleColor},textAnim);
                    $span.stop().animate({color:spanColor},textAnim);
                    $fade.stop(true,true).fadeOut(textAnim);
                }, focusin:function() {
                    $text.stop().animate({color:linkHover},textAnim);
                    $title.stop().animate({color:linkHover},textAnim);
                    $span.stop().animate({color:linkHover},textAnim);
                    $fade.stop(true,true).fadeIn(textAnim);
                }, focusout:function() {
                    $text.stop().animate({color:linkColor},textAnim);
                    $title.stop().animate({color:titleColor},textAnim);
                    $span.stop().animate({color:spanColor},textAnim);
                    $fade.stop(true,true).fadeOut(textAnim);
                }
            }).click(function() {
                $(this).find("div.btn a").trigger('click');
            });
        }
    });

Answer 1

您的代码有问题的部分是这样的：

$("div.boxContent") /* miss the each function */
.click(function() {
    $(this).find("div.btn a").trigger('click');
});

这表示“每次在此元素上收到任何单击事件时，都会触发对后代元素的单击”。然而，事件冒泡意味着在此函数中触发的事件随后由该事件处理程序再次处理，无限。我认为，阻止这种情况的最佳方法是查看事件是否源自 div.btn a 元素。您可以使用 is 和 is 和 event.target 表示：

$("div.boxContent") /* miss the each function */
.click(function(event) {
    if (!$(event.target).is('div.btn a')) {
        $(this).find("div.btn a").trigger('click');
    }
});

“如果点击源自 div.btn 之外的任何元素a，触发div.btn的点击事件这意味着该函数不会处理由 trigger 调用引起的事件，这优于检查 event.target == this （如安迪的回答有it），因为它可以处理 div.boxContent 中存在的其他元素。

Answer 2

解决此问题的一种更简洁的方法是获取触发点击的元素并将其放在触发的元素之外：

因此，如果您有这样的方法：

<div class="boxContent">

    <div class="btn">
        <a href="#">link</a> <!-- move this line... -->
    </div>
</div>
<!-- ... to here. -->

<script>
$("div.boxContent") /* miss the each function */
    .click(function() {
    $(this).find("div.btn a").trigger('click');
});
</script>

通过将“div.btn a”标签移到“boxContent”之外分区您可以一起避免递归循环。