javascript élément de corps.onclick attatch événement setTimeout
Je veux faire popup div qui disparaît lorsque je clique sur l'extérieur. J'ai besoin de la pure js, pas un jQuery ou quelque chose.
Donc, je ne le suit...
fonction que faire des div à disparaître:
function closePopUps(){
if(document.getElementById('contact-details-div'))
document.getElementById('contact-details-div').style.display = 'none';
//...same code further...
}
function closePopUpsBody(e){
//finding current target - http://www.quirksmode.org/js/events_properties.html#target
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3) //defeat Safari bug
targ = targ.parentNode;
//is we inside div?
while (targ.parentNode) {
//filtering "Close" button inside div
if (targ.className && targ.className == 'closebtn')
break;
if (targ.className && targ.className == 'contact-profile-popup')
break;
targ = targ.parentNode;
}
//if it not a div, or close button, hide all divs and remove event handler
if ((targ.className && targ.className == 'closebtn')
|| !(targ.className && targ.className == 'contact-profile-popup')) {
if(document.getElementById('contact-details-div'))
document.getElementById('contact-details-div').style.display = 'none';
//...some more code here...
document.body.onclick = null;
}
}
peut-être que ce code est moche, mais ce n'est pas un problème essentiel...
principal problème est quand je joindre un événement de corps, il s'exécute immédiatement! et div disparaît immédiatement, je n'ai pas la voir.
<tr onclick="
closePopUps();
document.getElementById('contact-details-div').style.display='block';
document.body.onclick = closePopUpsBody;
return false;">
j'ai pensé que si je n'utilise pas de parenthèses, il ne s'exécute?
document.body.onclick = closePopUpsBody(); //this executes
document.body.onclick = function(){closePopUpsBody()}; //this is not
document.body.onclick = closePopUpsBody; //this is not
enfin, j'ai fini avec cette décision
<tr onclick="
closePopUps();
document.getElementById('contact-details-div').style.display='block';
setTimeout('document.body.onclick = closePopUpsBody;', 500);
return false;">
mais je pense que c'est de la folie. donc, ce que je fais de mal?
Pouvez-vous donner un lien vers un exemple vivant, ou encore mieux, un jsfiddle?
Lorsque vous avez
merci pour les réponses, vous avez tous été à droite - problème en l'absence de stopPropagation en tr inline onclick code
document.body.onclick = closePopUpsBody
devrait fonctionner comme prévu.Lorsque vous avez
document.body.onclick = closePopUpsBody
exactement ce qui se passe lorsque vous cliquez sur? Vous obtenez une erreur?merci pour les réponses, vous avez tous été à droite - problème en l'absence de stopPropagation en tr inline onclick code
OriginalL'auteur llamerr | 2010-11-24
Vous devez vous connecter pour publier un commentaire.
Vous devriez arrêter de remontée d'événements. Simple [démo]
OriginalL'auteur gblazex
Généralement les événements sont propagées aux parents. Si vous cliquez sur un
<div>
, puis<body>
aura également sa onClick appelé.La première chose est de débogage de l'ordre de fonctions: lieu
window.dump("I am called!")
genre de choses dans vos gestionnaires.Je suppose que vous devez appeler
event.stopPropagation()
quelque part dans votre code. (Voir https://developer.mozilla.org/en/DOM/event )Sur les parenthèses à la question:
Cela exécute, car vous appelez une fonction closePopUpsBody() pour renvoyer une valeur qui sera affectée à la propriété surclic (onclick). En JavaScript, le nom de la fonction représente la fonction de l'objet (comme n'importe quelle autre variable). Si vous placez entre parenthèses après le nom d'une variable, puis vous dites: "exécuter" pour moi, comme une fonction".
OriginalL'auteur Arsen7
Voici un exemple complet de la façon dont vous pourriez le faire.
OriginalL'auteur Ioannis Karadimas