J'utilise ce code:
$('body').click(function() {
$('.form_wrapper').hide();
});
$('.form_wrapper').click(function(event){
event.stopPropagation();
});
Et ce HTML :
<div class="form_wrapper">
<a class="agree" href="javascript:;">I Agree</a>
<a class="disagree" href="javascript:;">Disagree</a>
</div>
Le problème est que j'ai des liens à l'intérieur du div
et quand ils ne fonctionnent plus lorsqu'ils sont cliqués.
$('html')
ou$(document)
serait mieux que$('body')
Réponses:
Eu le même problème, est venu avec cette solution facile. Cela fonctionne même récursivement:
la source
$("YOUR CONTAINER SELECTOR").unbind( 'click', clickDocument );
juste à côté.hide()
. Alorsdocument
ne continuez pas à écouter les clics.$(document).on("mouseup.hideDocClick", function () { ... });
dans la fonction qui ouvre le conteneur et$(document).off('.hideDocClick');
sur la fonction de masquage. En utilisant des espaces de noms, je ne supprime pas les autresmouseup
écouteurs possibles attachés au document.Vous feriez mieux d'aller avec quelque chose comme ça:
la source
hover
gestionnaire d'événements, ce qui ouvre de nombreuses possibilités.(function() { // ... code })();
Je ne me souviens pas du nom de ce modèle, mais c'est super utile! Toutes vos variables déclarées résideront à l'intérieur de la fonction et ne pollueront pas l'espace de noms global.Ce code détecte tout événement de clic sur la page, puis masque l'
#CONTAINER
élément si et seulement si l'élément cliqué n'était ni l'#CONTAINER
élément ni l'un de ses descendants.la source
Vous souhaiterez peut-être vérifier la cible de l'événement de clic qui se déclenche pour le corps au lieu de compter sur stopPropagation.
Quelque chose comme:
De plus, l'élément body peut ne pas inclure tout l'espace visuel affiché dans le navigateur. Si vous remarquez que vos clics ne sont pas enregistrés, vous devrez peut-être ajouter à la place le gestionnaire de clics pour l'élément HTML.
la source
e.stopPropagation();
si vous avez un autre auditeur de clicsform_wrapper
lorsque vous cliquez sur l'un de ses enfants, ce qui n'est pas le comportement souhaité. Utilisez plutôt la réponse de prc322.DÉMO en direct
Vérifier que la zone de clic n'est pas dans l'élément ciblé ou dans son enfant
MISE À JOUR:
jQuery stop propagation est la meilleure solution
DÉMO en direct
la source
clicked
ci. Sinon,stopPropagation
cela rendrait possible l'ouverture simultanée de plusieurs listes déroulantes.la source
Mise à jour de la solution pour:
var mouseOverActiveElement = false;
la source
.live
est désormais obsolète ; utiliser à la.on
place.Une solution sans jQuery pour la réponse la plus populaire :
MDN: https://developer.mozilla.org/en/docs/Web/API/Node/contains
la source
bind
ça ne marche pas. Pourriez-vous corriger la fonction pour la faire fonctionner?Démo en direct avec ESCfonctionnalité
Fonctionne à la fois sur ordinateur et sur mobile
Si dans certains cas, vous devez être sûr que votre élément est vraiment visible lorsque vous cliquez sur le document:
if($pop.is(':visible') && (notH||e.which==27)) $pop.hide();
la source
Est-ce que quelque chose comme ça ne marcherait pas?
ou
la source
.form_wrapper
lorsque vous cliquez sur ses enfants (entre autres problèmes).Encore plus léger:
la source
.wrapper
n'importe où vous cliquez sur la page, ce qui n'est pas ce qui a été demandé.Au lieu d'écouter chaque clic sur le DOM pour masquer un élément spécifique, vous pouvez définir
tabindex
le parent<div>
et écouter lesfocusout
événements.Le réglage
tabindex
s'assurera que l'blur
événement est déclenché sur le<div>
(normalement il ne le ferait pas).Ainsi, votre HTML ressemblerait à:
Et votre JS:
la source
Et pour les appareils tactiles comme IPAD et IPHONE, nous pouvons utiliser le code suivant
la source
Voici un jsfiddle que j'ai trouvé sur un autre fil, fonctionne également avec la touche esc: http://jsfiddle.net/S5ftb/404
la source
Construit à partir de la réponse impressionnante de prc322.
Cela ajoute quelques éléments ...
J'espère que ça aidera quelqu'un!
la source
si vous avez des problèmes avec ios, mouseup ne fonctionne pas sur l'appareil Apple.
est-ce que mousedown / mouseup dans jquery fonctionne pour l'ipad?
j'utilise ceci:
la source
(Ajout juste à la réponse de prc322.)
Dans mon cas, j'utilise ce code pour masquer un menu de navigation qui apparaît lorsque l'utilisateur clique sur un onglet approprié. J'ai trouvé utile d'ajouter une condition supplémentaire, à savoir que la cible du clic en dehors du conteneur n'est pas un lien.
En effet, certains des liens de mon site ajoutent du nouveau contenu à la page. Si ce nouveau contenu est ajouté en même temps que le menu de navigation disparaît, il peut être désorientant pour l'utilisateur.
la source
Tant de réponses, doit être un droit de passage pour en avoir ajouté une ... Je n'ai pas vu de réponses actuelles (jQuery 3.1.1) - donc:
la source
la source
p
est le nom de l'élément. Où l'on peut également passer l'id ou le nom de classe ou d'élément.la source
Renvoyez false si vous cliquez sur .form_wrapper:
la source
Attachez un événement de clic aux éléments de niveau supérieur en dehors de l'encapsuleur de formulaire, par exemple:
Cela fonctionnera également sur les appareils tactiles, assurez-vous simplement de ne pas inclure un parent de .form_wrapper dans votre liste de sélecteurs.
la source
VIOLON
la source
la source
Copié de https://sdtuts.com/click-on-not-specified-element/
Démo en direct http://demos.sdtuts.com/click-on-specified-element
la source
je l'ai fait comme ça:
la source
la source
En utilisant ce code, vous pouvez masquer autant d'éléments que vous le souhaitez
la source
Ce que vous pouvez faire est de lier un événement de clic au document qui masquera la liste déroulante si quelque chose en dehors de la liste déroulante est cliqué, mais ne le masquera pas si quelque chose à l'intérieur de la liste déroulante est cliqué, donc votre événement "show" (ou glissé ou autre) montre la liste déroulante)
Ensuite, lorsque vous le cachez, dissociez l'événement de clic
la source
Selon les documents ,
.blur()
fonctionne plus que la<input>
balise. Par exemple:la source
div
s jamais flou - les événements de flou ne peuvent même pas leur venir de leurs enfants. Enfin, même si ce qui précède n'était pas vrai, cela ne fonctionnerait que si vous vous assuriez que le.form_wrapper
était au point avant que l'utilisateur ne clique dessus.