jQuery click n'importe où dans la page sauf sur 1 div

Question

Comment puis-je déclencher une fonction lorsque je clique n'importe où sur ma page sauf sur une div ( id=menu_content ) ?

Answer 1

Vous pouvez demander click en body de document et annuler click traitement si le click est généré par un div avec l'id menu_content Ceci va lier l'événement à un seul élément et sauvegarder la liaison de l'événement. click avec chaque élément sauf 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

});

Answer 2

Voir la documentation de Cible d'événement jQuery . En utilisant la propriété target de l'objet événement, vous pouvez détecter l'endroit d'où provient le clic dans la fenêtre de l'événement. #menu_content et, si c'est le cas, mettre fin prématurément au gestionnaire de clics. Vous devrez utiliser .closest() pour gérer les cas où le clic provient d'un descendant de #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
});

Answer 3

Essayez ceci

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

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

vous pouvez également utiliser le événements extérieurs

Answer 4

Je sais qu'on a déjà répondu à cette question, et toutes les réponses sont bonnes. Mais je voulais ajouter mes deux cents à cette question pour les personnes qui ont un problème similaire (mais pas exactement le même).

D'une manière plus générale, nous pouvons faire quelque chose comme ceci :

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

De cette façon, nous pouvons gérer non seulement les événements déclenchés par n'importe quel élément sauf celui ayant un id menu_content mais aussi des événements qui sont déclenchés par n'importe quoi, à l'exception de tout élément que nous pouvons sélectionner à l'aide de sélecteurs CSS.

Par exemple, dans l'extrait de code suivant, je reçois des événements déclenchés par n'importe quel élément, sauf tous les éléments. <li> qui sont des descendants de l'élément div avec id myNavbar .

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

Answer 5

Voici ce que j'ai fait. Je voulais m'assurer que je pouvais cliquer sur n'importe quel enfant de mon afficheur de date sans le fermer.

$('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
    }
});

mon code actuel :

$('html').click(function(e){
    if (e.target.id != 'datepicker'
        && $(e.target).parents('#datepicker').length == 0
        && !$(e.target).hasClass('datepicker')
    ) {
        $('#datepicker').remove();
    }
});