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中的对象进行比较的正确方法是什么？

Answer 1

要检查e.target是否有此课程，您可以使用hasClass功能。

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

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

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

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()更快

Answer 3

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

以下是这两个例子。

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

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

Answer 4

显然，使用.is()函数是最佳解决方案。

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

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

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

https://jsfiddle.net/m5zysufy/

Answer 5

$(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();
  }
});

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

5 个答案: