javascript jQuery 触发器单击给出了“太多递归”

jQuery trigger click gives "too much recursion"

提问by Thomas

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 bubblingproblem. I tried to work with event.cancelBubble = true;or stopPropagation()with no luck. Worse luck!

我认为这是一个event bubbling问题。我试图工作event.cancelBubble = true;或stopPropagation()没有运气。运气更差！

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

回答by lonesomeday

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 aelement. You could use isand event.targetfor this:

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

$("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 triggercall 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.

这表示“如果单击起源于除 a 之外的任何元素，则在 上div.btn a触发单击事件div.btn a。这意味着trigger此函数将不会处理由调用引起的事件。这优于检查event.target == this（如安迪的回答），因为它可以处理存在于div.boxContent.

回答by pachanka

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.

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