Часто бывает, что нужно обработать клик вне активного элемента (блока), например когда сделан кастомный выпадающий список.
Подобная проблема бывает когда используется всплывающее (модальное) окно, но там, чаще всего, есть слой с зтемнением, клик по которому и можно обработать.
Предположим, что у нас есть элемент с классом "select_wrapper", а внутри него элементы при клике на которые ничего делать не нужно, а вот при нажатии на элементы за приделами "select_wrapper" нужно производить какое-либо действие.
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <ul class="select_wrapper">
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
</ul>
|
Javascript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | $(function() {
$(document).on('click', function(event){
let elParent = $(event.target).parent();
if(elParent)
{
if(!elParent.hasClass("select_wrapper"))
{
console.debug("Working");
} else {
console.debug('Do nothing');
}
}
});
});
|