javascript - 事件目标匹配但未调用函数？

Question

考虑以下 jquery:

$('.entry-links:not(.entry-links-processed)').each(function(){
        $(this).addClass('entry-links-processed');
        $('li a', this).click(function(event){
            $target = $(event.target);
            var tabPics = $('#tab-pics>a');
            if($target === tabPics){
                tabTest.getPics();
            }
          $('.entry-links li a').removeClass('active');
          $(this).addClass('active');
          var id = $(this).attr('href');
          $('.entry-box:not(' + id + ')').hide();
          $(id).show();
            return false;
        });
    });

我有三个选项卡或菜单项:当您单击其中一个时，此代码将隐藏其他选项卡的内容部分。

其中，以下部分是本题的重点:

                  $target = $(event.target);
            var tabPics = $('#tab-pics>a');
            if($target === tabPics){
                tabTest.getPics();
            }

如代码片段所示，我试图在单击图片选项卡时调用一个函数。在使用断点的代码之后，我看到我成功捕获了 $target，但是，即使它与 tabPics 匹配，函数调用也被跳过，其余代码正常运行。

如果我匹配了 $target 和 tabPics，为什么当我满足 if 语句中的条件时它会跳过函数调用？

感谢您的帮助。

Answer 1

您原来的方法不起作用，因为您正在测试两个不同对象的相等性:

var $target = $(event.target);
var tabPics = $('#tab-pics>a');

当您在选择器或现有 dom 元素上调用 jQuery 时，它会返回自身的一个版本，包装它决定匹配的元素。每次这个对象都是不同的，所以下面的代码:

if ( $target === tabPics ) {
  /// this wont be reached
}

等同于说:

if ( {} === {} ) {
  /// neither will this
}

虽然上面的代码两个对象在视觉上看起来是一样的，即使你这样做:

if ( {a:123} === {a:123} ) {
  /// nope...
}

JavaScript 仍会将上述视为错误，因为在使用 === 比较对象时，对象必须是完全相同的对象，它们不能是具有相同内容的不同对象。

以下链接可能有用:

How would you compare jQuery objects?

希望这能消除困惑。我可以看到您的逻辑走向，在另一种语言中它可能有意义，这不是测试对象时 === 在 JavaScript 中的工作方式。