web-dev-qa-db-fra.com

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

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

javascriptjqueryhtmltriggersclick
75
Vincent Roye

Vous pouvez appliquer click sur body du document et annuler le traitement de click si l'événement click est généré par div avec id menu_content, Ceci liera l’événement à un seul élément et enregistrera la liaison de click avec tous les éléments 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

});
121
Adil

Consultez la documentation de jQuery Event Target . En utilisant la propriété target de l'objet événement, vous pouvez détecter l'origine du clic dans l'élément #menu_content Et, si tel est le cas, mettre fin au gestionnaire de clics à un stade précoce. Vous devrez utiliser .closest() pour traiter 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
});
46
nbrooks

essaye ça

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

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

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

40
Database_Query

Je sais que cette question a été répondue, et toutes les réponses sont gentilles. 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 autre chose que l'élément avec id menu_content mais aussi des événements déclenchés par tout sauf un élément que nous pouvons sélectionner à l'aide de sélecteurs CSS.

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

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

voici ce que j'ai fait. Je voulais être sûr de pouvoir cliquer sur l'un des enfants de mon Datepicker 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();
    }
});
4
Nate