event.pageX - ¿Utiliza JQuery Event en una función no vinculada a través de JQuery?

Question

Tengo una tabla, y cuando el usuario hace clic en cada celda, algunos detalles deben aparecer en una pequeña ventana emergente que aparece donde el usuario hizo clic. Estoy usando JQuery, pero no para vincular la función al evento onclick.

function detailPopup(cell, event, groupName, groupID, ...) 
{ 
    var newDiv = document.createElement("div"); 
    newDiv.id = "detailPop" + groupID; 
    newDiv.className = "priceDetailPopup"; 
    newDiv.innerHTML = "<p>" + groupName + "</p>"; // more will go here 
    $(newDiv).click(function() 
     { 
      $(this).fadeOut("fast").remove(); 
     } 
    ); 
    $("#main").append(newDiv); 
    $(newDiv).css({"left" : event.pageX, "top" : event.pageY}).fadeIn("fast"); 
} 

Todo funciona perfectamente en FF, Safari y Chrome. En IE, todo funciona, excepto que el detalle div aparece debajo de la tabla. event.pageX/Y no funcionan. Sé jQuery solucionará los de IE si obligar a la función a través de jQuery como esto:

$(cell).click(function(e) { ... e.pageX ... }) 

Pero no puedo hacer eso. (No creo que pueda; si lo hace, explique cómo puedo obtener seis variables en esa función sin tener que usar etiquetas que no sean xhtml en la celda).

¿Hay alguna forma de que JQuery "solucione"? "el objeto del evento sin vincular la función a través de JQuery? $ JQuery.fixEvent (evento); ¿o algo? No puedo encontrar ninguna referencia para hacerlo en su sitio.

Muchas gracias de antemano.

Answer 1

e = jQuery.event.fix(e); //you should rename your event parameter to "e" 

me encontré con la función fix buscando a través del código fuente jQuery.

Como alternativa, se puede usar esto para obtener las coordenadas del ratón sin jQuery ...

var posx = 0; 
var posy = 0; 
if (!e) var e = window.event; 
if (e.pageX || e.pageY) { 
    posx = e.pageX; 
    posy = e.pageY; 
} 
else if (e.clientX || e.clientY) { 
    posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 
    posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
} 

Via PPK: http://www.quirksmode.org/js/events_properties.html

Answer 2

Usted puede encontrar que el problema que se enfrenta no es una problema de posicionamiento en absoluto. Según la sintaxis que publicó, es posible que experimente un error de IE relacionado con el uso del selector de ID de CSS.

$("#main").append(newDiv); 

Si IE no reconoce el elemento "#main", la función append() no funcionará correctamente. IE (pre-v7) tiene soporte irregular para el selector ID (#). En su lugar, intente:

$('div[id="main"]').append(newDiv); 

Pruebe esto y avíseme cómo funciona para usted.

Answer 3

Este blog parece ser relevante: http://www.barneyb.com/barneyblog/2009/04/10/jquery-bind-data/

Parece que es sólo jQuery("#selector").bind("click", {name: "barney"}, clickHandler);, entonces e.data.name para acceder a ella en el evento.