为现代浏览器检索 div 内的点击坐标？答案

【问题标题】：Retreiving coordinates of a click inside a div for modern browsers?为现代浏览器检索 div 内的点击坐标？
【发布时间】：2013-06-08 22:34:18
【问题描述】：

对于现代浏览器（IE 10+、FF、Safari、Chrome）：看起来您必须使用外观模式来构建一致的界面，并使用此信息做很多工作。

我正在寻找一种简单的现代方法来确定用户在 div 中单击的位置的 x、y 坐标，并使用这些坐标来定位在此 SO Question 中确定的饼形菜单。

没有库，除非用于展示概念。

参考

What is the difference between screenX/Y, clientX/Y and pageX/Y?

这是一个google hit，它显示了 3 个不同的事件属性

【问题讨论】：

标签： javascript

【解决方案1】：

你可以试试

element.onclick = function(e) {
  var x = e.pageX - element.offsetLeft // the absolute x position
                                       // minus the element's absolute x position
  var y = e.pageY - element.offsetTop
  alert('x : ' + x + ', y : ' + y)
}

Here is a fiddle

【讨论】：

【解决方案2】：

以下将为您提供页面中单击的任何 div 的坐标；对于特定的 div，将 'div' 替换为 '#yourDivId'

$(document).ready(function(){   
   $('div').click(function(e){
       var x = e.pageX; 
       var y = e.pageY;
       alert(...);
   });
});

【讨论】：