event.pageX - использовать событие jQuery в функции, не связанной через jQuery?

Question

У меня есть таблица, и когда пользователь нажимает на каждую ячейку, некоторые детали должны появиться в небольшом всплывающем элементе div, который появляется там, где пользователь щелкнул. Я использую jQuery, но не для привязки функции к событию 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");
}

Все прекрасно работает в FF, Safari и Chrome. В IE все это работает, за исключением того, что подробный div отображается под таблицей. event.pageX / Y не работают. Я знаю, jQuery исправит их для IE, если я свяжу функцию через jQuery следующим образом:

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

Но я не могу этого сделать. (Я не думаю, что смогу - если вы это сделаете, пожалуйста, объясните, как я могу получить шесть переменных в эту функцию, не используя теги не-xhtml в ячейке.)

Есть ли способ заставить jQuery "исправить" объект события без привязки функции через jQuery? $ JQuery.fixEvent (событие); или что-то? Я не могу найти ссылки на это на их сайте.

Answer 1

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

Я нашел функцию fix, выполнив поиск по исходному коду jQuery.

Кроме того, вы можете использовать это, чтобы получить координаты мыши без 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;
}

Через ППК: http://www.quirksmode.org/js/events_properties.html

Answer 2

Это сообщение в блоге представляется уместным: http://www.barneyb.com/barneyblog/2009/04/10/jquery-bind-data/

Кажется, это просто jQuery("#selector").bind("click", {name: "barney"}, clickHandler);, затем e.data.name для доступа к нему в событии.

Answer 3

Вы можете обнаружить, что проблема, с которой вы сталкиваетесь, вообще не является проблемой позиционирования. Судя по опубликованному вами синтаксису, вы можете столкнуться с ошибкой IE, связанной с использованием селектора CSS ID.

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

Если IE не распознает элемент "#main", функция append () не будет работать правильно. IE (pre-v7) имеет пятнистую поддержку селектора ID (#). Вместо этого попробуйте:

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

Попробуйте и дайте мне знать, как это работает для вас.