Detectar si al hacer clic sobre el documento estaba o no sobre cierto elemento

AubeRoseau · #1 (**permalink**) 05/04/2011, 02:56

Hola,

voy a intentar explicar lo que pretendo hacer. Tengo un elemento div dentro del mi documento. Pretendo realizar cierta operación cuando el usuario haga clic en cualquier parte del documento, pero si no se hizo sobre el elemento div. No se si me explico. El caso es que el clic sobre el documento se detecta también si se hizo sobre el elemento div.

Lo que quiero es una vez detecta el evento clic sobre el documento, saber si se hizo además sobre el elemento div o no.

Si no entendeis, decírmelo e intentaré explicarme mejor.

Acabo de ver que es posible con el atributo target del Event.

Panino5001 · #2 (**permalink**) 05/04/2011, 03:31

Fijate si te sirve:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&#237;tulo</title>
<style type="text/css">
div{ background:#F00; margin:50px; height:50px}
</style>
<script type="text/javascript">
function addEvent(obj,fun,type){ 
    if(obj.addEventListener){ 
        obj.addEventListener(type,fun,false); 
    }else if(obj.attachEvent){ 
        var f=function(){ 
            fun.call(obj,window.event); 
        } 
        obj.attachEvent('on'+type,f); 
        obj[fun.toString()+type]=f; 
    }else{ 
        obj['on'+type]=fun; 
    } 
}  
var DR=function(f){
    if(document.addEventListener){
        var func=function(){f();document.removeEventListener('DOMContentLoaded',func,false);}
        document.addEventListener('DOMContentLoaded',func,false);
    }else{
        function r(f){/in/.test(document.readyState)?setTimeout(function(){r(f);},9):f();};
        r(f);
    }
}
function fun(e){
    
    var dest=e.target || e.srcElement;
    if(dest.nodeName.toUpperCase()=='DIV'){
        alert('hiciste click sobre el div con id '+dest.id);    
    }else{
        alert('hiciste click en '+dest.nodeName);    
    }
}
DR(
    function(){
         addEvent(document,fun,'click');
    }   
);
</script>

</head>

<body>
<div id="pp"></div>
<div id="pp2"></div>

</body>
</html>