Как да разпозная кликване извън елемент?

Имам няколко HTML менюта, които се показват изцяло, когато потребителят кликне върху главата на тези менюта. Бих искал да скрия тези елементи, когато потребителят щракне извън областта на менютата'.

Възможно ли е подобно нещо с jQuery?

$("#menuscontainer").clickOutsideThisElement(function() {
    // Hide the menus
});
Peter Mortensen
Редактиран въпрос Направете октомври 2016 в 4:05
Програмиране
javascript jquery
Направете септември 2008 в 1:17
149 изгледи
Решение

ЗАБЕЛЕЖКА: Използването на stopEventPropagation() трябва да се избягва, тъй като нарушава нормалния поток от събития в DOM. Вижте тази статия за повече информация. Помислете за използването на този метод вместо това

Прикачете събитие за щракване върху тялото на документа, което затваря прозореца. Прикрепете отделно събитие за щракване към контейнера, което спира разпространението към тялото на документа.

$(window).click(function() {
//Hide the menus if visible
});

$('#menucontainer').click(function(event){
    event.stopPropagation();
});
Renz Dominique
Редактиран отговор Направете декември 2018 в 7:43
Коментари (30)

Имам приложение, което работи подобно на примера на Eran'с изключение на това, че прикрепям събитието за кликване към тялото, когато отварям менюто... Подобно на това:

$('#menucontainer').click(function(event) {
  $('html').one('click',function() {
    // Hide the menus
  });

  event.stopPropagation();
});

Повече информация за jQuery's one() function

Lal
Редактиран отговор Направете февруари 2016 в 2:57
Коментари (7)

Проверете целта на събитието за щракване върху прозореца (то трябва да се разпространи в прозореца, стига да не е уловено никъде другаде) и се уверете, че това не е някой от елементите на менюто. Ако не е, значи сте извън менюто си.

Или проверете позицията на щракването и вижте дали то се намира в областта на менюто.

Коментари (0)