event.pageX - Utiliser l'événement JQuery dans une fonction non liée à JQuery?

Question

J'ai une table, et quand l'utilisateur clique sur chaque cellule, certains détails devraient apparaître dans une petite div pop-up qui apparaît là où l'utilisateur a cliqué. J'utilise JQuery, mais pas pour lier la fonction à l'événement 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"); 
} 

Tout fonctionne à merveille dans FF, Safari et Chrome. Dans IE, tout fonctionne sauf que la div de détail apparaît sous la table. event.pageX/Y ne fonctionnent pas. Je sais que JQuery corrigera ceux pour IE si je lie la fonction par JQuery comme ceci:

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

Mais je ne peux pas faire cela. (Je ne pense pas que je peux - si vous le faites, s'il vous plaît expliquer comment je peux obtenir six variables dans cette fonction sans avoir à utiliser des étiquettes non-xhtml dans la cellule.)

Y at-il un moyen d'avoir JQuery? "l'objet d'événement sans lier la fonction à travers JQuery? $ JQuery.fixEvent (event); ou quelque chose? Je ne trouve aucune référence pour le faire sur leur site.

Merci beaucoup à l'avance.

Answer 1

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

Je trouve la fonction fix en effectuant une recherche dans le code source jQuery.

Sinon, vous pouvez l'utiliser pour obtenir la souris sans coordonnées ... 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

Vous trouverez peut-être que le problème que vous rencontrez est pas problème de positionnement du tout. En fonction de la syntaxe que vous avez publiée, vous pouvez rencontrer un bug IE lié à l'utilisation du sélecteur d'ID CSS.

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

Si IE ne reconnaît pas l'élément "#main", la fonction append() ne fonctionnera pas correctement. IE (pré-v7) a un support irrégulier pour le sélecteur ID (#). Au lieu de cela, essayez:

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

Essayez ceci et faites-moi savoir comment cela fonctionne pour vous.

Answer 3

Ce billet de blog semble pertinent: http://www.barneyb.com/barneyblog/2009/04/10/jquery-bind-data/

On peut dire qu'elle est juste jQuery("#selector").bind("click", {name: "barney"}, clickHandler);, puis e.data.name pour y accéder à l'événement.