将'e.target'与jQuery对象进行比较

Question

我想要做的事情：

( clickedObject === someDiv ) //returns true or false

我尝试了什么

( $(e.target) === $('.selector') ); //returns a false negative.

我的解决方案

( $(e.target).attr('class') === $('.selector').attr('class') ); //works as intended, not so clean though.

怎样才能将我点击的对象与DOM中的对象进行比较？

- dubbelj

Answer 1

要检查e.target是否包含这个类，您可以使用hasClass函数。

if ($(e.target).hasClass("selector"))

或者，如果你真的想要比较对象，请注意jQuery选择器返回一个项目集合，因此我认为你会想要

if (e.target === $('.selector')[0])

- Adam Rackis

---

我喜欢这个答案，因为它解释了为什么我的方法不起作用。jQuery返回一个项目集合。 - dubbelj

Answer 2

你已经接近了答案。请使用.is()方法：

if($(e.target).is('.selector')) {
    // Your code
}

这里的技巧是将e.target包装在jQuery对象中，以便让它可以访问所有有用的jQuery方法。

如果您只是想查看e.target是否具有某个类，请尝试使用.hasClass()来替换.is()。

if($(e.target).hasClass('selector')) {
    // Your code
}

两种方法都可以，不过 .hasClass() 更清晰地展示了代码的作用，并且比使用 .is() 更快。

- Bojangles

---

如果您已经有要与之进行比较的元素的引用，则可以使用以下代码：$myButton.is(e.target) - Michael Allan Jackson

Answer 3

$(document).click(function (e) {
  e.stopPropagation();
  var container = $('.dropdown-list').attr('class');
  if ($(e.target).attr('class') == container) {
    $('.dropdown-menu').slideToggle();
  } else {
    $('.header .header-elem .dropdown-nav .dropdown-menu').slideUp();
  }
});

- K.Natarajan

---

请在您的答案中添加一些解释。 - Sfili_81

Answer 4

如果你想匹配事件所附加的元素，可以使用$(this)，或者如果你想找到触发事件的元素，可以使用$(event.target)。

下面是这两种情况的示例。

http://jsfiddle.net/Phunky/TbJef/

除非您使用事件委托，否则它们将是相同的，如果它们是相同的元素。

- Phunky

Answer 5

很明显，在这里使用.is()函数是最好的解决方案。

如果你发现自己在进行这样的比较，请尝试检查是否可以使用嵌入式jQuery机制，例如：

$(element).on("click", ".selector", function() {
    alert("clicked");
});

.on() 方法中的第二个参数是目标选择器。使用这种结构（阅读更多：http://api.jquery.com/on/#direct-and-delegated-events），就不需要进行任何额外的比较。

https://jsfiddle.net/m5zysufy/

- luke