JQuery триггер клика дает "слишком много рекурсии" - PullRequest
Новая
       16

JQuery триггер клика дает "слишком много рекурсии"

11 голосов
/ 11 мая 2011

Я пытаюсь сделать ссылку статьи кликабельной во всем пространстве статьи.

Сначала я сделал всплывающую подсказку, изменив цвет при наведении курсора и т. Д., Затем при щелчке он должен вызвать ссылку, но это дает «слишком большую рекурсию».

Я думаю, что это проблема 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');
            });
        }
    });

Ответы [ 2 ]

31 голосов
/ 11 мая 2011

Проблематичным битом вашего кода является следующее: 

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

Это говорит: «каждый раз, когда любое событие щелчка получено по этому элементу, инициируйте щелчок по элементу-потомку».Однако всплывающее сообщение о событии означает, что событие, запущенное в этой функции, затем снова обрабатывается этим обработчиком события ad infinitum .Думаю, лучший способ остановить это - посмотреть, произошло ли событие в элементе 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 (так как ответ Энди имеет )потому что он может справиться с другими элементами, существующими в div.boxContent.

0 голосов
/ 12 сентября 2013

Более чистый способ решить эту проблему - взять элемент, на который вы нажали, и поместить его за пределы сработавшего элемента:

Так что, если у вас есть это: 

<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" за пределы div "boxContent".Вы избегаете цикла рекурсии все вместе.

...