event.pageX - Verwenden Sie JQuery Event in einer Funktion, die nicht durch JQuery gebunden ist?

Question

Ich habe eine Tabelle, und wenn der Benutzer auf jede Zelle klickt, sollten einige Details in einem kleinen Popup-Teil angezeigt werden, der dort erscheint, wo der Benutzer geklickt hat. Ich benutze JQuery, aber nicht um die Funktion an das onclick-Ereignis zu binden.

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

Alles funktioniert wunderbar in FF, Safari und Chrome. Im IE funktioniert alles, außer dass das Detail-Div unterhalb der Tabelle erscheint. event.pageX/Y funktionieren nicht. Ich weiß, JQuery wird die für IE beheben, wenn ich die Funktion durch JQuery wie diese binden:

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

Aber ich kann das nicht tun. (Ich glaube nicht, dass ich das kann - wenn Sie das tun, bitte erläutern Sie, wie ich sechs Variablen in diese Funktion bekommen kann, ohne nicht-xhtml-Tags in der Zelle zu verwenden.)

Gibt es eine Möglichkeit, JQuery "reparieren zu lassen "das Ereignisobjekt, ohne die Funktion über JQuery zu binden? $ JQuery.fixEvent (Ereignis); oder so? Ich kann keinen Hinweis darauf finden, dies auf ihrer Website zu tun.

Vielen Dank im Voraus.

Answer 1

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

Ich fand die fix Funktion durch den Quellcode jQuery suchen.

Alternativ können Sie diese verwenden, die Maus-Koordinaten ohne jQuery zu erhalten ...

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

Sie können feststellen, dass das Problem, das Sie mit Blick sind kein Positionierung Problem überhaupt. Je nach der von Ihnen veröffentlichten Syntax tritt möglicherweise ein IE-Fehler auf, der sich auf die Verwendung des CSS-ID-Selektors bezieht.

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

Wenn IE das "#main" Element nicht erkennt, die append() Funktion wird nicht korrekt funktionieren. IE (pre-v7) hat fleckige Unterstützung für den ID (#) Selektor. Versuchen Sie stattdessen:

Versuchen Sie dies und lassen Sie mich wissen, wie es für Sie funktioniert.

Answer 3

Dieser Blog-Eintrag scheint relevant: http://www.barneyb.com/barneyblog/2009/04/10/jquery-bind-data/

scheint es nur jQuery("#selector").bind("click", {name: "barney"}, clickHandler);, dann e.data.name zuzugreifen es in der Veranstaltung.