jQuery触发器单击会给出“太多的递归". [英] 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".

我认为这是一个event bubbling问题.我尝试使用event.cancelBubble = true;或stopPropagation()时没有运气.更糟糕的运气！

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

有人吗?

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

推荐答案

您的代码中有问题的部分是:

The problematic bit of your code is this:

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

这表示每次在此元素上收到任何点击事件时，都会触发对后代元素的点击".但是，事件冒泡意味着此事件处理程序 ad infinitum 将再次处理此函数中触发的事件.我认为，阻止这种情况的最好方法是查看事件是否起源于div.btn a元素.您可以使用 is 和

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

这表示如果点击源自div.btn a之外的任何元素，则触发div.btn a上的点击事件.这意味着由trigger调用引起的事件将不被该函数处理.这是比检查event.target == this更好(如安迪的答案已经实现)，因为它可以处理div.boxContent中存在的其他元素.

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.

这篇关于jQuery触发器单击会给出“太多的递归".的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！