Question

我有这样的功能：

jQuery(document.documentElement).on('click touch', function(e) {
    // check if $(e.target) matches with $('ul#menu-navigation > li.menu-item')
    // or any child elements within this particular div.
});

如何使用 if 语句检查e.target是否与$('ul#menu-navigation > li.menu-item')匹配，或此特定div中的任何子元素。

例如：

if ( $(e.target) == $('ul#menu-navigation > li.menu-item') ) {
    // user clicked on this div or any child divs within this element
} else {
    // user clicked anywhere outside of this div
}

Answer 1

使用closest()从目标开始并查找

jQuery(document).on('click touch', function(e) {
    if($(e.target).closest('ul#menu-navigation > li.menu-item').length){
      // is within a menu item
    }   
});

Answer 2

像这样使用jQuery.is：

if ( $(e.target).is('ul#menu-navigation *') ) {
    // user clicked on this div or any child divs within this element
} else {
    // user clicked anywhere outside of this div
}

如果您只想包含ul#menu-navigation > li.menu-item和li.menu-item的孩子，请使用此选择器：'ul#menu-navigation > li.menu-item, ul#menu-navigation > li.menu-item *'

Answer 3

尝试使用if ($(e.target).is('ul#menu-navigation > li.menu-item'))

这将询问元素是否匹配。

＆＃13;

jQuery(document.documentElement).on('click touch', function(e) {
  if ($(e.target).is('ul#menu-navigation > li.menu-item')) {
    // user clicked on this div or any child divs within this element
    alert("I clicked on LI")
  } else {
    // user clicked anywhere outside of this div
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu-navigation">
  <li class="menu-item">Home</li>
  <li class="menu-item">About</li>
</ul>

＆＃13;

Answer 4

我无法真正理解这个功能的好处。我可以想象，当您不将事件绑定到e.currentTarget时，可以使用e.target代替document.documentElement来解决问题。将它绑定到您的目标，在这种情况下，我认为它应该是$('ul#menu-navigation > li.menu-item')

$('ul#menu-navigation > li.menu-item').on('click', function (event) {
    var $target = $(event.currentTarget);
})

使用此解决方案，您知道它是您想要的元素，并且您可以减少开销，因为您不会在文档中的某个位置收听每个klick。

$（document.documentElement）目标特定元素

4 个答案: