javascript elemento de cuerpo.onclick attatch evento setTimeout

Quiero hacer emergente div que desaparece cuando hago clic fuera de ella. Necesito puro js, no jQuery o algo.
Así que hago lo siguiente…

función que hacen div a desaparecer:

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;
    }
}

tal vez este código es feo, pero este no es un problema principal…

principal problema es que cuando conecto un evento para el cuerpo, se ejecuta inmediatamente! y div desaparece de inmediato, yo aún no lo veo.

<tr onclick="
closePopUps();
document.getElementById('contact-details-div').style.display='block';
document.body.onclick = closePopUpsBody;
return false;">

yo, sin embargo, si no se utilizan los paréntesis, no se ejecuta?

document.body.onclick = closePopUpsBody(); //this executes
document.body.onclick = function(){closePopUpsBody()}; //this is not
document.body.onclick = closePopUpsBody; //this is not

por fin terminé con esta decisión

<tr onclick="
closePopUps();
document.getElementById('contact-details-div').style.display='block';
setTimeout('document.body.onclick = closePopUpsBody;', 500);
return false;">

pero creo que esto es una locura. así que, ¿qué estoy haciendo mal?

  • Se puede dar un enlace a un ejemplo en vivo, o mejor aún, un jsfiddle? document.body.onclick = closePopUpsBody debería funcionar como se esperaba.
  • Cuando usted tiene document.body.onclick = closePopUpsBody exactamente lo que sucede cuando usted haga clic en? Usted obtener algún error?
  • gracias por las respuestas, que todos estaban en lo correcto – problema en ausencia de stopPropagation en tr en línea onclick código
InformationsquelleAutor llamerr | 2010-11-24

3 Kommentare

  1. 3

    Debe detener la propagación de los eventos. Simple [demo]

    var box = document.getElementById('box');
    var close = document.getElementById('close');
    
    //click on a box does nothing
    box.onclick = function (e) {
      e = e || window.event;
      e.cancelBubble = true;
      if (e.stopPropagation)
        e.stopPropagation();
    }
    
    //click everywhere else closes the box
    function close_box() {
      if (box) box.style.display = "none";
    }
    
    close.onclick = document.onclick = close_box;
  2. 2

    Generalmente los eventos se propagan a los padres. Si hace clic en un <div>, entonces <body> también tendrá su onClick llamado.

    El primero es: depurar el orden de las funciones llamadas: lugar window.dump("I am called!") tipo de cosas en sus controladores.

    Supongo que usted necesita llamar a event.stopPropagation() en algún lugar en el código. (Ver https://developer.mozilla.org/en/DOM/event )

    Acerca de los paréntesis pregunta:

    document.body.onclick = closePopUpsBody;//this is not
    document.body.onclick = closePopUpsBody();//this executes

    Este se ejecuta, porque se está llamando a una función closePopUpsBody() para devolver un valor que será asignado a la propiedad onclick. En JavaScript, el nombre de la función que representa la función de objeto (como cualquier otra variable). Si usted coloca entre paréntesis después del nombre de la variable, luego te dicen: ‘ejecutar para mí, como una función`.

  3. 1

    Aquí ‘s un ejemplo completo de cómo se puede lograr eso.

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title></title>
        <style>
            body { font-family: Tahoma; font-size: 1.1em; background: #666666; color: White; }
            #layer01 { border: 1px solid black; width: 200px; height: 100px; position: absolute; 
                       top: 100px; left: 100px; background: white; padding: 10px; color: Black;
                       display: block; }
        </style>
    </head>
    <body>
        Click anywhere outside the layer to hide it.
    
        <div id="layer01"> Test Layer </div>
    
        <script type="text/javascript">
            isIE = (window.ActiveXObject) ? true : false;
    
            document.onclick = function (e) {
                var l = document.getElementById("layer01");
    
                if (!isIE && e.originalTarget == l)
                    e.stopPropagation();
                else if (isIE && event.srcElement == l)
                    event.cancelBubble = true;
                else 
                    l.style.display = "none";
            }
    
        </script>
    </body>
    </html>

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea