Problema con addeventlistener al pasar event como variable ayuda!!!!riable

[hernandavidgomez]

HOLA:

LLEVO HORAS TRATANDO DE SOLUCIONAR ESTE PROBLEMA Y NO HE PODIDO, OJALA ME PUEDAN AYUDAR, DE ANTEMANO MUCHAS GRACIAS POR SU TIEMPO.
EL PROBLEMA ES EL SIGUIENTE:
RESULTA QUE TENGO UN BOTON QUE AL DAR CLICK LE AGREGO UNAS FUNCIONES CON ADDEVENTLISTENER. PINCHO UNA VEZ AGREGO UNAS FUNCIONES Y QUITO OTRAS, PINCHO OTRA VEZ Y REVIERTO EL PROCESO. ME FUNCIONA DE MARAVILLA. EL PROBLEMA ME HA SURGIDO HOY CUANDO LO PROBE EN FIREFOX Y PASA LO SIGUIENTE:
AL DAR CLICK NECESITO SABER LA POSICION DEL PUNTERO, PARA ELLO TENGO UNA FUNCION QUE ME REALIZA LA OPERACION, EL PROBLEMA ES QUE PARA HALLAR ESA POSICION UTILIZO LA SIGUIENTE LINEA:

Código Javascript:

posicionx=event.x-posicion_div_x+document.body.scrollLeft; 
    posiciony=event.y-posicion_div_y+document.body.scrollTop;
 

EN TODOS LOS NAVEGADORES FUNCIONA BIEN, EL PROBLEMA SURGE CON FIREFOX PUES ME DICE QUE "EVENT" NO ESTA DEFINIDO. YA SE QUE PARA FIREFOX CUANDO LLAMO LA FUNCION DEBO PASAR EL EVENTO COMO PARAMETRO, EL PROBLEMA ES QUE LA FUNCION DE POSICION DEL PUNTERO PREVIAMENTE LA HE AÑADIDO CON EL ADDEVENTLISTENER Y SI TRATO DE PASAR "EVENT" COMO PARAMETRO ME DICE NUEVAMENTE QUE NO SE HA DEFINIDO, Y SI LO PASO ENTRECOMILLAS LO PASA COMO UNA SIMPLE CADENA DE TEXTO Y NO COMO EL EVENTO QUE NECESITO. ESPERO HABER SIDO CLARO. ACA VA EL CODIGO.

Código Javascript:

function posicion_puntero(e)
{
    document.getElementById('capa_tag').style.display='none';
    if(navegador == 'explorer')
    {
        posicion_div_y=document.getElementById("div_imagen").offsetParent.offsetTop;
        posicion_div_x=document.getElementById("div_imagen").offsetParent.offsetLeft;
    }
    else
    {
        posicion_div_y=document.getElementById("div_imagen").offsetTop;
        posicion_div_x=document.getElementById("div_imagen").offsetLeft;
    }
    
    posicionx=event.x-posicion_div_x+document.body.scrollLeft; 
    posiciony=event.y-posicion_div_y+document.body.scrollTop;
    
    document.getElementById('coordx').value=posicionx;
    document.getElementById('coordy').value=posiciony;
    animatedcollapse.show('capa_tag');
    var capa_tag=document.getElementById('capa_tag');
    ancho_capa=capa_tag.offsetWidth;
    capa_medio=ancho_capa/2;
    /*capa_tag.style.top=(posicion_div_y+posiciony)+30+"px";
    capa_tag.style.left=(posicion_div_x+posicionx)-capa_medio+"px";*/
    capa_tag.style.top=(posiciony)+30+"px";
    capa_tag.style.left=(posicionx)-capa_medio+"px";
    var capa_target=document.getElementById('capa_target');
    capa_target.style.display='block';
    capa_target.style.top=(posiciony)-25+"px";
    capa_target.style.left=(posicionx)-25+"px";
    
}
 

ACA AGREGO LA FUNCION ANTERIOR AL BOTON:

Código Javascript:

function taggea(men_finaliza, men_original, auto) { 
document.getElementById('boton_tag').innerHTML=men_finaliza;
document.getElementById('boton_tag').style.backgroundImage="url(images/fondo-tagging-2.png)";
            botontag=document.getElementById('boton_tag');
            x=document.getElementById('imagen_world');
            x.style.cursor="crosshair";
            checkCookie('ayuda_tag');
            if(tienecookie !== true)
            {
                muestraAyuda(auto);
            }
        if (x.addEventListener){ 
            x.addEventListener('click', function(){posicion_puntero('e')},false);
            botontag.removeEventListener('click',function(){taggea;}, false);
            botontag.onclick="";
            botontag.addEventListener("click", function(){ taggea_ya_no(men_finaliza, men_original, auto)} , false);
        } else { 
            x.attachEvent('onclick',posicion_puntero); 
            botontag.detachEvent ('onclick', taggea);
            botontag.onclick = function(){taggea_ya_no(men_finaliza, men_original,auto);};
        }
    }
 

SE QUE AQUI HAY PERSONAS QUE CONOCEN MUCHO DEL TEMA, ESPERO QUE PORFAVOR ME PUEDAN AYUDAR PUES YA HE LEIDO, PROBADO Y PROBADO Y SIGO SIN PODER AGREGAR LA FUNCION EN FIREFOX, EN EL RESTO FUNCIONA A LAS MIL MARAVILLAS

GRACIAS

[_cronos2]

A) No le estás pasando el evento a la función:

x.addEventListener('click', function(){posicion_puntero('e')},false);

Primero porque en todo caso sería e, no "e"; y después porque primero deberías pasárselo como argumento a la función contenedora. Como no lo encuentra en arguments, va buscando hacia arriba para ver si encuentra e, y como no lo encuentra da error. De todas maneras, mejor usar el handler, para poder usar removeEventListener después:

x.addEventListener('click', posicion_puntero, false);

B) removeEventListener/detachEvent necesitan como argumento el mismo handler que se usó al añadir el evento, y puesto que:

var a = function(){ return 'a'; };
var b = function(){ return 'a'; };
a == b; // false

tu solución de encapsular las funciones no es viable, a no ser que lo almacenes en una variable, pero no le veo el sentido.

C) ¿A TI NO TE HAN DICHO NUNCA QUE ESCRIBIR EN MAYÚSCULAS EN INTERNET ES COMO SI GRITARAS?
Saludos.

[hernandavidgomez]

Gracias por tu respuesta, intenté pasar el evento como parametro desde la funcion inicial, pero sigue presentando el problema, ya no se que hacer...
estos fueron los cambios.

Código Javascript:

function posicion_puntero(e)
{//mas adelante
event = e;
posicionx=e.x-posicion_div_x+document.body.scrollLeft; 
    posiciony=e.y-posicion_div_y+document.body.scrollTop;
 

Código Javascript:

function taggea(men_finaliza, men_original, auto, event) { 
//mas adelante:
if (x.addEventListener){ 
            x.addEventListener('click', function(){posicion_puntero(event)},false);
            botontag.removeEventListener('click',function(){taggea;}, false);
            botontag.onclick="";
            botontag.addEventListener("click", function(){ taggea_ya_no(men_finaliza, men_original, auto, event)} , false);
        }
 

Código Javascript:

function taggea_ya_no(men_finaliza, men_original, auto, event) {
//mas adelante:
if (boton.addEventListener){ 
            a.removeEventListener('click',posicion_puntero, false);
            boton.onclick="";
            botontag.removeEventListener('click',function(){taggea_ya_no;}, false);
            boton.addEventListener("click", function(){ taggea(men_finaliza, men_original, auto, event)} , false);
            
            }
 

En los demas navegadores sigue funcionando, en firefox me aparece como error que e no esta definida....
se meacaban las ideas no se que mas intentar
gracias

[IsaBelM]

a lo que te ha explicado _cronos2

• punto A (sin resultado). prueba así; x.addEventListener('click', function(event){posicion_puntero(event)},false);
• punto B (ni caso). un poco de lectura
• punto C (has corregido)

[hernandavidgomez]

Hola isabel muchas gracias.....
pasando event como me has puesto en el punto 2 digamos que hemos avanzado un monton, el script se ejecuta incluso en firefox pero en este no me determina la posicion del puntero...

Código Javascript:

function posicion_puntero(event)
{
    document.getElementById('capa_tag').style.display='none';
    if(navegador == 'explorer')
    {
        posicion_div_y=document.getElementById("div_imagen").offsetParent.offsetTop;
        posicion_div_x=document.getElementById("div_imagen").offsetParent.offsetLeft;
    }
    else
    {
        posicion_div_y=document.getElementById("div_imagen").offsetTop;
        posicion_div_x=document.getElementById("div_imagen").offsetLeft;
    }
    //alert(event.x);
    posicionx=event.x-posicion_div_x+document.body.scrollLeft; 
    posiciony=event.y-posicion_div_y+document.body.scrollTop;
 

posicionx me aparece como indefinida...
no se que estoy haciendo mal
gracias

[IsaBelM]

venga hombre, no es tan difícil. pon un poco de tu parte. lee esto

[hernandavidgomez]

Ya listo :) casi no .... gracias a la ayuda de ustedes, luego de pasar event com oparametro como mencione en la respuesta anterior (gracias a su ayuda) no me daba la posicion del puntero por lo siguiente:

Código Javascript:

posicionx=e.x-posicion_div_x+document.body.scrollLeft; 
        posiciony=e.y-posicion_div_y+document.body.scrollTop;
 

lo cambie por esto:

Código Javascript:

if(navegador == 'explorer')
    {       
        posicionx=e.x-posicion_div_x+document.body.scrollLeft; 
        posiciony=e.y-posicion_div_y+document.body.scrollTop;       
    }
    else
    {       
        posicionx=e.clientX - posicion_div_x+document.body.scrollLeft; 
        posiciony=e.clientY - posicion_div_y+document.body.scrollTop;   
    }
 

Notese que solo agregué "clientX". Punto resuelto,

AHORA LO SIGUIENTE:

Lo que mencionaron en el punto B, para remover el evento, no entiendo muy bien cual es el error que me señalan, y efectivamente esta ocurriendo. En explorer funciona bien pero en el resto no remueve las funciones..
un ultimo empujoncito
gracias

[hernandavidgomez]

Hola, el problema es el siguiente:
tengo asignado a un boton una serie de funciones que quito y pongo segun vaya haciendo click.
En internet explorer con detachEvent me funciona bien
pero en el resto de navegadores es toy agregando las funciones pero no me elimina las que indico con removeeventlistener....
Agradeceria si alguien ve donde esta el error
gracias

Código Javascript:

function taggea(men_finaliza, men_original, auto, event) { 
document.getElementById('boton_tag').innerHTML=men_finaliza;
document.getElementById('boton_tag').style.backgroundImage="url(images/fondo-tagging-2.png)";
            botontag=document.getElementById('boton_tag');
            x=document.getElementById('imagen_world');
            x.style.cursor="crosshair";
            checkCookie('ayuda_tag');
            if(tienecookie !== true)
            {
                muestraAyuda(auto);
            }
        if (x.addEventListener){ 
            x.addEventListener('click', function(event){posicion_puntero(event)},false);
            botontag.removeEventListener('click',taggea, false);
        } else { 
            x.attachEvent('onclick',posicion_puntero); 
            botontag.detachEvent ('onclick', taggea);
            };
        }
    }
 

He mostrado la funcion taggea y luego pretendo eliminarla para que no aparezca mas pero no funciona.
Asi la llamo de html:

Código HTML:

onclick="taggea('finalizar', 'mi familia', 1, event);"
 

[IsaBelM]

presta atención a lo que _cronos2 te lo has explicado y a la liga que te he proporcionado

[hernandavidgomez]

isabel agradezco tu ayuda, pero no entiendo, he leido cien veces lo qu eme han escrito y no lo logro, si conoces la solucion podrias decirmela?? la solucion no es volver a hacer el script solo indicarme donde estoy fallando.
no quisiera mas acertijos
muchas gracias

[jseros]

Cuando asignas un evento desde los atributos HTML no agregar funciones a la cola de eventos. Atributos como Onclick sólo pueden ejecutar el "código" que le asignas en ese momento, así, si posteriormente haces element.onclick="alert('sorpresa!');" tu código anterior no se va a ejecutar. En tu caso en particular te recomiendo quitar el onclick y hacer algo como esto.

Código Javascript:

elemento.addEventListener('click',function(evt){
   taggea('finalizar', 'mi familia', 1, evt);
} ,false);
 

Saludos

[hernandavidgomez]

A ti que te encanta leer y anallizar, el otro post "EN SU TITULO" no dice nada de "REMOVEEVNTLISTENER" dice es "PROBLEMA CON ADDEVENTLISTENER.." "ADD" para agregar "event como parametro.a
Este es otro problema que ni siquiera sabia que tenia pero que gracias _cronos2 ,me hizo caer en cuenta.

Abro este nuevo tema para cuestion de claridad del problema, y para ver si alguien me puede hacer dar cuenta de mi errror, y no ponerme con acertijos.
gracias

[Panino5001]

Iniciado por hernandavidgomez

Abro este nuevo tema para cuestion de claridad del problema, y para ver si alguien me puede hacer dar cuenta de mi errror, y no ponerme con acertijos.
gracias

Mejor continuemos en el mismo tema.
Temas unidos

[hernandavidgomez]

Gracias jseros por darme una orientacion a mi problema.
No se si entendí bien l que me dijiste, pero he quitado el onclick como atributo de la etiqeta en HTML,
en lugar de eso he puesto en onload del body una nueva funcion oara que cargue la funcion original.
este es el codigo:

Código Javascript:

function cargaOnclick(men_finaliza, men_original, auto, evt)
{
    botontag=document.getElementById('boton_tag');
    if(botontag.addEventListener)
    {
        botontag.addEventListener('click',function(evt){
           taggea(men_finaliza, men_original, auto, evt);
        } ,false);
    }
    else
    {
        botontag.onclick = function(){taggea(men_finaliza, men_original, auto, evt);};
    }
}
 

En internet explorer funciona perfecto, pero en el resto de navegadores no quita la funcio orifginal!
no se que hacer
ayuda

[jseros]

En efecto cometí un error y que claramente estás intentado remover la función taggea del elemento pero estás agregando una función wrapper que ejecuta taggea. En ese caso, lo primero que se me viene a la cabeza es almacenar la referencia de la función wrapper y así poder agregarla y removerla de la cola de eventos.

Código Javascript:

var taggeaWrapper = function(evt){
     taggea(men_finaliza, men_original, auto, evt);
} ,false);
 

Así luego haces

botontag.addEventListener('click', taggeaWrapper,...
y
botontag.removeEventListener('click', taggeaWrapper,...

Según corresponda.

[hernandavidgomez]

jseros Muchas gracias!
fue la solucion a todos mis males.
mil mil gracias