使用jQuery相对于鼠标单击位置定位div元素

我必须显示一个相对于鼠标点击位置的div元素。我试过event.PageX，它在chrome中运行良好，但不幸的是在mozilla和internet explorer中无法运行。这是我的密码：

这是要单击的元素。单击此按钮后，我必须将div元素放置在与其相对的位置。将有很多元素具有onclick='JavaScript:ShowMiniDialog（this）；'功能

    <a id="tab1" onclick='JavaScript:ShowMiniDialog(this);' href="#tabs-1">New Tab</a>

这段代码在Google Chrome浏览器中绝对可以正常工作。 如果是mozilla和internet explorer，请帮助我

我得到以下错误

    ReferenceError: event is not defined
    ...'#tblStyleControl').css('left', event.pageX + 10);

---

事件

变量应该是jQuery click函数的一个参数。在自定义的

ShowMiniDialog（ctrl）{/*'event'变量未在此处定义*/}

函数中不可用。 试试这个

<a id="tab1" href="#tabs-1">New Tab</a>

避免多次查找元素

$（“#tblStyleControl”）

以获得更好的性能

---

请参阅

我找到了一些解决mozilla和internet explorer问题的方法。所以我给出了这个答案

我没有在鼠标点击的地方获取鼠标指针的坐标，而是尝试获取html元素的坐标，然后我使用了一些x和y值，这非常有效。不幸的是，不是在铬。但这仍然是mozilla和internet explorer的答案

由于事件正在运行（在问题中提到），我们可以对chrome、mozilla和internet explorer使用相同的方法，这就是答案

var left = $('#tab1').offset().left;
var top = $('#tab1').offset().top;

---

根据这个坐标，我使用了位置。太棒了

一个JSFIDLE会更好…我是JSFIDLE的新手。我试图创建相同的场景，但无法完成@我在JSFIDLE中设置了C-link。jsfiddle.net/mgRxn/14–我也需要单击元素的id，因此我在ShowMiniDialog函数中传递“this”。但现在这项活动也是必需的。因为它没有定义。。jsfiddle.net/mgRxn/14–请参考此链接，您可能会在jsfiddle演示中获得一些想法。。检查这是否适用于静态元件。但是，对于使用拖放功能创建的动态元素，即使该元素与“popupTrigger”类关联，单击事件也不会触发。请使用绑定事件来动态创建元素Scan u请给出一行代码，我可以在其中使用委托绑定来获取此事件

<a id="tab1" href="#tabs-1">New Tab</a>

$('a#tab1').click(function(event){ 
    // Calculate pageX/Y if missing and clientX/Y available
    if (event.pageX == null && event.clientX != null) {
        var doc = document.documentElement, body = document.body;
        event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
        event.pageY = event.clientY + (doc && doc.scrollTop  || body && body.scrollTop  || 0) - (doc && doc.clientTop  || body && body.clientTop  || 0);
    }
            $('#hdnCR').val(event.target.id);

    $('#tblStyleControl').css({
        'left': event.pageX + 10,
        'top': event.pageY - 80,
        'display': 'inline',
        "position": "absolute"
    }).show(); 
});

var left = $('#tab1').offset().left;
var top = $('#tab1').offset().top;