jQuery parents()与对象引用选择器

Question

我试图检测目标元素是一个子元素,还是我作为对象引用的相同元素.

我使用以下逻辑:

$("html").on("mousewheel.scroll DOMMouseScroll.scroll",function(e){
   e.preventDefault();

   var $scrollableElement = $(".foo").eq(0);
   var $target = $(e.target);

   if ($target == $scrollableElement
       || $target.parents($scrollableElement).length) {                
        alert("scroll");                    
   }

});  

然而,即使在既不是.foo或者也不是孩子的元素上滚动,"滚动"也会被警告.foo.

在我的JsFiddle示例中,滚动.bar元素,"scroll"仍然会收到警报:

http://jsfiddle.net/Lf3d2/

为什么是这样？是否可以使用jQuery对象引用作为选择器.parents()？

Answer 1

试试.closest()而不是.parents()

$(function () {

    var $scrollableElement = $(".foo").eq(0);
    $("html").on("mousewheel.scroll DOMMouseScroll.scroll", function (e) {
        e.preventDefault();

        var $target = $(e.target);

        if ($target.closest($scrollableElement).length) {
            console.log("scroll");
        }

    });

});

演示:小提琴

如果你看一下.parents()的语法,它不会将jQuery对象作为参数.唯一允许的语法是.parents( [selector ] )

正如@ A.Wolff所说,为什么不将事件绑定到.foo相反的地方

演示:小提琴