鼠标事件：从基本级别元素获取鼠标坐标答案

【问题标题】：Mouse event: Getting mouse coords from base level element鼠标事件：从基本级别元素获取鼠标坐标
【发布时间】：2011-06-22 13:15:03
【问题描述】：

我的布局类似于

<div id="outer">  
     <div id="inner"></div>  
</div>

“外部”元素的鼠标事件。

我正在使用带有 layerX 和 layerY 值的 jQuery 的 mouseup 事件访问事件的鼠标坐标。

当在“inner”元素上收到点击时，它会给出点击相对于“inner”元素的坐标。是否有可能当点击元素时，它可以给鼠标相对于外部元素的坐标

我所拥有的基本概述

$('#outer').mouseup(function(e){  
    // do stuff with  
    //e.layerX  
    //e.layerY  
}

【问题讨论】：

标签： javascript jquery javascript-events

【解决方案1】：

jQuery 没有内置的方法来执行此操作，但是您可以按照您描述的方式计算您要查找的内容。然而，更简单的方法是总是获取鼠标相对于文档的位置，然后减去 #outer 元素相对于文档的位置：

var $outer = $('#outer');
$outer.mouseup(function(e) {
    var offset = $outer.offset();
    var x = e.pageX - offset.left;
    var y = e.pageY - offset.top;
});

【讨论】：