Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/450.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript jQuery触发器单击给出;“递归太多”;_Javascript_Jquery_Events_Triggers_Event Bubbling - Fatal编程技术网

Javascript jQuery触发器单击给出;“递归太多”;

Javascript jQuery触发器单击给出;“递归太多”;,javascript,jquery,events,triggers,event-bubbling,Javascript,Jquery,Events,Triggers,Event Bubbling,我想让文章的链接在整个文章空间中都可以点击 首先,我做了悬停,在鼠标上方改变颜色等等。。。然后点击它会触发链接,但这会产生“太多的递归” 我认为这是一个事件冒泡的问题。我尝试使用event.cancelBubble=true或stopPropagation()没有运气。真倒霉 有人吗 $("div.boxContent").each(function() { if ($(this).find(".btn").length) { var $fade

我想让文章的链接在整个文章空间中都可以点击

首先,我做了悬停,在鼠标上方改变颜色等等。。。然后点击它会触发链接,但这会产生“太多的递归”

我认为这是一个
事件冒泡的问题。我尝试使用
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');
            });
        }
    });

代码中有问题的地方是:

$("div.boxContent") /* miss the each function */
.click(function() {
    $(this).find("div.btn a").trigger('click');
});
这表示“每次在此元素上接收到任何单击事件时,都会触发对子元素的单击”。然而,事件冒泡意味着在这个函数中触发的事件将被这个事件处理程序无限地再次处理。我认为,阻止这种情况的最好方法是查看事件是否起源于
div.btna
元素。为此,您可以使用和:

$("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
上的点击事件。这意味着
触发器
调用引起的事件将不由此函数处理。这优于检查
事件。目标==此
(as)因为它可以处理
div.boxContent

中存在的其他元素,所以解决此问题的一个更简洁的方法是将要触发单击的元素置于触发的元素之外:

所以如果你有这个:

<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.boxContent”)/*错过每个函数*/
。单击(函数(){
$(this).find(“div.btn a”).trigger(“click”);
});

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

+1,你是对的,这比我建议的检查要好。删除是为了赞成。我确实认为更好的方法是从
div.btn a
元素中取消气泡,但是,因为我不喜欢使用低效的
is()
function.啊,现在我明白了!这就成功了。谢谢你lonesomeday。