Comment puis-je déclencher une fonction lorsque je clique n'importe où sur ma page sauf sur un div ( id=menu_content
)?
87
Vous pouvez appliquer click
sur un body
document et annuler le click
traitement 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 click
avec 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
});
closest
commence par l'élément courant, il gère le clic surmenu_content
, ainsi que le clic sur les descendants. Je pense que la secondeif
est tout ce dont vous avez besoin.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 });
la source
essaye ça
$('html').click(function() { //your stuf }); $('#menucontainer').click(function(event){ event.stopPropagation(); });
vous pouvez également utiliser les événements extérieurs
la source
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_content
mais é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 idmyNavbar
.$('body').click(function(evt){ if(!$(evt.target).is('div#myNavbar li')) { //event handling code } });
la source
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(); } });
la source