jQuery щелкните в любом месте страницы, кроме 1 div

88

Как я могу вызвать функцию, когда я нажимаю где угодно на моей странице, кроме одного div ( id=menu_content)?

Винсент Рой
источник

Ответы:

142

Вы можете подать заявление clickна bodyдокумент и отменить clickобработку , если clickсобытие генерируется DIV с идентификатором menu_content, Это будет связать событие с одного элементом и сохранение связывания clickс каждым элементом , за исключениеmenu_content

$('body').click(function(evt){    
       if(evt.target.id == "menu_content")
          return;
       //For descendants of menu_content being clicked, remove this check if you do not want to put constraint on descendants.
       if($(evt.target).closest('#menu_content').length)
          return;             

      //Do processing of click event here for every element except with id menu_content

});
Адиль
источник
3
а как насчет потомков в DIV?
iKamy
2
Мы можем использовать ближайший для проверки источника события любого предка с идентификатором menu_content, например if ($ (evt.target) .closest ('# menu_content'). Length) retrun; проверьте мой обновленный ответ.
Адиль
Поскольку closestначинается с текущего элемента, он обрабатывает нажатие menu_content, а также нажатие на потомков. Думаю, второе if- это все, что тебе нужно.
goodeye
50

См. Документацию для jQuery Event Target . Используя свойство target объекта события, вы можете определить, где произошел щелчок внутри #menu_contentэлемента, и, если да, преждевременно завершить работу обработчика щелчка. Вам нужно будет использовать .closest()для обработки случаев, когда щелчок произошел от потомка #menu_content.

$(document).click(function(e){

    // Check if click was triggered on or within #menu_content
    if( $(e.target).closest("#menu_content").length > 0 ) {
        return false;
    }

    // Otherwise
    // trigger your click function
});
Nbrooks
источник
42

попробуй это

 $('html').click(function() {
 //your stuf
 });

 $('#menucontainer').click(function(event){
     event.stopPropagation();
 });

вы также можете использовать внешние события

Database_Query
источник
5
Это работает, но использование event.stopPropagation () может оказывать влияние на другие JS, содержащиеся в родительском элементе.
Эдд Смит
9

Я знаю, что на этот вопрос есть ответ, и все ответы хороши. Но я хотел добавить свои два цента к этому вопросу для людей, у которых есть похожая (но не совсем такая) проблема.

В более общем виде мы можем сделать что-то вроде этого:

$('body').click(function(evt){    
    if(!$(evt.target).is('#menu_content')) {
        //event handling code
    }
});

Таким образом, мы можем обрабатывать не только события, запускаемые чем-либо, кроме элемента с идентификатором, menu_contentно и событиями, которые запускаются чем-либо, кроме любого элемента, который мы можем выбрать с помощью селекторов CSS.

Например, в следующем фрагменте кода я получаю события, запускаемые любым элементом, кроме всех <li>элементов, которые являются потомками элемента div с идентификатором myNavbar.

$('body').click(function(evt){    
    if(!$(evt.target).is('div#myNavbar li')) {
        //event handling code
    }
});
Гэндальф
источник
1
Я просто хотел сказать, что этот метод у меня отлично сработал, я использовал .is (), а также .closest () с селектором css, у которого не было идентификатора, но только некоторые классы, спасибо
reipse
7

вот что я сделал. хотел убедиться, что могу щелкнуть любого из детей в моем средстве выбора даты, не закрывая его.

$('html').click(function(e){
    if (e.target.id == 'menu_content' || $(e.target).parents('#menu_content').length > 0) {
        // clicked menu content or children
    } else {
        // didnt click menu content
    }
});

мой фактический код:

$('html').click(function(e){
    if (e.target.id != 'datepicker'
        && $(e.target).parents('#datepicker').length == 0
        && !$(e.target).hasClass('datepicker')
    ) {
        $('#datepicker').remove();
    }
});
Нейт
источник
Хорошая версия, включающая клики по детям и классу, должна быть выбранным ответом!
rAthus