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

【问题标题】：jQuery trigger click gives "too much recursion"jQuery触发点击给出“太多递归”
【发布时间】：2011-08-23 12:00:15
【问题描述】：

我正在尝试让文章的链接在整个文章空间中都可点击。

首先，我做了悬停的事情，在鼠标悬停时改变颜色等等......然后点击它应该触发链接，但这会产生“太多的递归”。

我认为这是event bubbling 的问题。我尝试与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');
            });
        }
    });

【问题讨论】：

标签： javascript jquery events triggers event-bubbling

【解决方案1】：

你的代码有问题的是：

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

这表示“每次在该元素上收到任何点击事件时，都会触发对后代元素的点击”。但是，事件冒泡意味着在此函数中触发的事件随后由此事件处理程序再次处理，无限期。我认为，阻止这种情况的最佳方法是查看事件是否源自div.btn a 元素。您可以为此使用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 a 上触发点击事件。这意味着由trigger 调用引起的事件将不会被此函数处理。这是优于检查event.target == this（如Andy's answer has it），因为它可以处理div.boxContent中存在的其他元素。

【讨论】：

+1，你是对的，这优于我建议的检查。删除赞成。我确实认为更好的方法是取消 div.btn a 元素中的气泡，但是，因为我不喜欢使用低效的 is() 函数。
啊，现在我明白了！这可以解决问题。谢谢你寂寞的一天。

【解决方案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”div 之外。你可以一起避免递归循环。

【讨论】：