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

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

Merci beaucoup

InformationsquelleAutor Vincent Roye | 2012-09-30
  1. 118

    Vous pouvez appliquer click sur body de document et annuler click le traitement si la click événement est généré par la div avec l'id menu_content, Cela aura pour effet de lier l'événement à un seul élément et l'enregistrement de liaison de click avec tous les éléments à l'exception de 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

});
    • qu'en descendant de l'enfant dans la DIV?
    • Nous pouvons utiliser le plus proche de la vérification de la source de l'événement a un ancêtre avec l'id menu_content comme si($(evt.cible).le plus proche('#menu_content').la longueur) retrun; vérifier mes mises à jour de réponse.
    • Merci s'accoupler....
    • Depuis closest commence avec l'élément courant, il gère cliquant sur menu_content, ainsi que de cliquer sur les descendants. Je pense que la deuxième if est tout ce dont vous avez besoin.
    InformationsquelleAutor Adil
  2. 46

    Consultez la documentation de jQuery Cible de l'Événement. À l'aide de la propriété target de l'objet d'événement, vous pouvez détecter où le clic a été créé par la #menu_content élément et, le cas échéant, de résilier le gestionnaire de clic tôt. Vous devrez utiliser .la plus proche() pour gérer les cas où le clic a son origine dans 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
});
    • Grand homme, Merci beaucoup
    InformationsquelleAutor nbrooks
  3. 40

    essayer cette 

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

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

    vous pouvez également utiliser le en dehors des événements

    • Ce travail, mais à l'aide de l'événement.stopPropagation() peut avoir des répercussions sur d'autres JS contenues dans le parent.
    InformationsquelleAutor Database_Query
  4. 5

    Je sais que cette question a été posée, Et toutes les réponses sont gentils.
    Mais je voulais ajouter mon grain de sel à cette question pour les gens qui ont le même (mais pas exactement le même problè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
    }
});

    Cette façon, nous pouvons gérer non seulement les événements déclenchés par quoi que ce soit à l'exception de l'élément avec l'id menu_content mais aussi les événements qui sont déclenchés par quoi que ce soit à l'exception de tout élément que l'on peut sélectionner à l'aide de sélecteurs CSS.

    Par exemple, dans l'extrait de code suivant, je suis les événements déclenchés par un élément quelconque à l'exception de tous <li> éléments qui sont les descendants de l'élément div avec l'id myNavbar.

    $('body').click(function(evt){    
    if(!$(evt.target).is('div#myNavbar li')) {
        //event handling code
    }
});
    • Je voulais juste dire que cette méthode a fonctionné pour moi très bien, je l'ai utilisé .est() et aussi .la plus proche() avec le sélecteur css qui n'avait aucune ID mais seulement certaines classes, je vous remercie
    InformationsquelleAutor gandalf
  5. 4

    voici ce que j'ai fait. voulais m'assurer que je pouvais cliquez sur l'un des enfants de mon datepicker sans la 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:

    $('html').click(function(e){
    if (e.target.id != 'datepicker'
        && $(e.target).parents('#datepicker').length == 0
        && !$(e.target).hasClass('datepicker')
    ) {
        $('#datepicker').remove();
    }
});
    • Belle version, y compris les clics ont des enfants et de la classe, doit être choisi de réponse!
    InformationsquelleAutor Nate