Question

如何捕捉正确的点击位置？

我有一个自制的上下文菜单，我想在点击位置加注。单击位于jQueryUI.dialog()对象中的DOMelement上。当我尝试时，我给了我错误的（供我使用）坐标。

使用Javascript：

$("a").on("contextmenu", function(eve){
  $("#contextmenu").show().css({
     left: eve.pageX,
     top: eve.pageY
  });
});


<div class="im-the-dialog">
    <div class="60% width">some content</div>
    <div>
        <ul>
            <li>
                <a class="clicked">click</a>
            </li>
        </ul>
    </div>
    <div class="the context menu">some links</div>
</div>

我该如何解决？

Answer 1

这就是你如何获得点击事件的正确坐标

$(document).ready(function() {
  $('img').click(function(e) {
    var offset = $(this).offset();
    alert(e.pageX - offset.left); //x cordinate
    alert(e.pageY - offset.top);  //y cordinate
  });
});

检查jsfiddle代码

Answer 2

您应该能够利用事件属性而无需任何计算。

假设对话框绝对定位，则应该只需要offsetX和offsetY属性。

event.clientX和event.clientY是您正在查找的坐标，如果您的上下文菜单绝对位于正文或静态定位的容器中。更多here。至少支持ie8。

支持clientX和clientY属性

jQuery - 在jqueryUI对话框中获取单击位置

2 个答案: