2017-02-20 3 views
2

У меня есть функция, как это:

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

Как сделать если заявление проверки, если e.target матчи с $('ul#menu-navigation > li.menu-item') или все дочерние элементы в это частности дела.

Например, что-то вроде:

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 
} 
+1

почему вы просто не крепление события щелчка к этому одному элементу? – Cruiser

+0

Вы ищете метод '' is() ') (http://api.jquery.com/is/)? –

+1

Вы ищете делегацию мероприятия? 'jQuery (document.documentElement) .on ('click touch', '# menu-navigation> .menu-item', function (e) {...})'? – Ryan

ответ

2

Используйте closest(), чтобы начать на цели и посмотреть

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

Это действительно умное решение! –

+0

Это прекрасно. Спасибо! Хотя это не должно быть '.length()'? –

+0

no ... 'length' - свойство не метод – charlietfl

1

Используйте 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 *'

+0

да отлично правильно –

+1

Но будет ли этот * if * оператор работать, если пользователь нажимает на дочерний элемент, например, например: 'ul # menu-navigation> li.menu-item> .random-child'? –

+0

@HenrikPetterson тогда не использует прямые обозначения детей. Смотрите обновление! Теперь он работает для любого элемента потомков! –

1

Попробуйте использовать if ($(e.target).is('ul#menu-navigation > li.menu-item'))

Это спросит, соответствует ли элемент.

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>

+2

Но будет ли эта инструкция * if * работать, если пользователь нажимает на дочерний элемент, например, например: 'ul # menu-navigation> li.menu-item> .random-child'? –

0

Я не могу действительно понял преимущество этой функции. Я могу представить, что вы можете решить эту проблему, используя 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 где-то в ваш документ.

+0

@Parvez Rahaman Спасибо :) Сделал слишком быстро – fGeyer