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

87

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

Vincent Roye
la source

Réponses:

141

Vous pouvez appliquer clicksur un bodydocument et annuler le clicktraitement si l' clickévénement est généré par div avec id menu_content, cela liera l'événement à un seul élément et enregistrera la liaison de clickavec chaque élément saufmenu_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

});
Adil
la source
3
qu'en est-il des enfants descendants dans la DIV?
iKamy
2
Nous pouvons utiliser le plus proche de la vérification de la source de l'événement a n'importe quel ancêtre avec id menu_content comme if ($ (evt.target) .closest ('# menu_content'). Length) retrun; vérifiez ma réponse mise à jour.
Adil
Depuis closestcommence par l'élément courant, il gère le clic sur menu_content, ainsi que le clic sur les descendants. Je pense que la seconde ifest tout ce dont vous avez besoin.
revoir
50

Consultez la documentation de jQuery Event Target . À l'aide de la propriété target de l'objet événement, vous pouvez détecter l'origine du clic dans l' #menu_contentélément et, si tel est le cas, arrêter le gestionnaire de clics prématurément. 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
});
nbrooks
la source
42

essaye ça

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

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

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

Database_Query
la source
5
Ce travail, mais l'utilisation de event.stopPropagation () peut avoir des effets sur d'autres JS contenus dans le parent.
Edd Smith
9

Je sais que cette question a été répondue, Et toutes les réponses sont belles. Mais je voulais ajouter mes deux cents à cette question pour les personnes qui ont un problème similaire (mais pas exactement le même).

De 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 quoi sauf l'élément avec un identifiant, menu_contentmais également les événements déclenchés par n'importe quoi, sauf tout élément que nous pouvons sélectionner à l'aide des sélecteurs CSS.

Par exemple, dans l'extrait de code suivant, j'obtiens des événements déclenchés par n'importe quel élément, sauf tous les <li>éléments 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
    }
});
Gandalf
la source
1
Je voulais juste dire que cette méthode fonctionnait très bien pour moi, j'ai utilisé .is () et aussi .closest () avec un sélecteur css qui n'avait pas d'ID mais juste quelques classes merci
relipse
7

Voici ce que j'ai fait. Je voulais m'assurer que je pouvais cliquer sur l'un des enfants de mon sélecteur 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();
    }
});
Nate
la source
Belle version comprenant des clics sur les enfants et la classe, devrait être la réponse choisie!
rAthus