jQuery trigger click gives “too much recursion”

问题:

I'm tryin' to make the article's link clickable on the whole article space.

First, I did the hover thing, changing color on mouseover and so on... then on click it should trigger the link, but this gives a "too much recursion".

I think it's a event bubbling problem. I tried to work with event.cancelBubble = true; or stopPropagation() with no luck. Worse luck!

anyone?

    $("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');
            });
        }
    });

回答1:

The problematic bit of your code is this:

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

This says "every time any click event is received on this element, trigger a click on the descendant element". However, event bubbling means that the event triggered in this function is then handled again by this event handler, ad infinitum. The best way to stop this is, I think, to see if the event originated on the div.btn a element. You could use is and event.target for this:

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

This says "if the click originated on any element apart from a div.btn a, trigger a click event on div.btn a. This means that events caused by the trigger call will not be handled by this function. This is superior to checking event.target == this (as Andy's answer has it) because it can cope with other elements existing within the div.boxContent.

回答2:

A cleaner way to solve this is to take the the element you are triggering the click on to and put it outside of the triggered element:

So if you have this:

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

By moving the "div.btn a" tag outside of the "boxContent" div. You avoid the recursion loop all together.