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

Question

I have a function like this:

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.
});

How do I make an if statement checking if e.target matches with $('ul#menu-navigation > li.menu-item') or any child elements within this particular div.

For example, something like:

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

Use closest() to start at target and look up

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

Use jQuery.is like this:

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
}

And if you want to include only ul#menu-navigation > li.menu-item and children of li.menu-item use this selector: 'ul#menu-navigation > li.menu-item, ul#menu-navigation > li.menu-item *'

Answer 3

Try use if ($(e.target).is('ul#menu-navigation > li.menu-item'))

This will ask if the element match.

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

 <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> 

Answer 4

I can not really understood the benefit of this function. I can imagine you can resolve the problem by using e.currentTarget instead of e.target , when you dont bind the event to document.documentElement . Bind it to your target, in this case I think it should be $('ul#menu-navigation > li.menu-item')

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

With this solution, you know it is the element what you want and you reduce the overhead, because you dont listen to every klick somewhere in your document.