一个 div 的鼠标坐标显示在另一个 div 中 - jquery答案

【问题标题】：mouse coordinates for one div displayed in another div - jquery一个 div 的鼠标坐标显示在另一个 div 中 - jquery
【发布时间】：2014-05-09 00:56:30
【问题描述】：

所以我有 2 个 div：

<div class="ccc" style="position: relative; left: 100px; top: 50px; width: 200px; height: 150px; border: solid 1px;" oncontextmenu="return false;"></div>
<div class="ddd" style="position: relative; left: 200px; top: 100px; width: 100px; height: 40px; border: solid 1px;" oncontextmenu="return false;"></div>

http://jsfiddle.net/n8rna/

我需要以下内容：

我需要用 class="ccc" 跟踪鼠标在 div 内的位置/移动（坐标应该相对于这个 div，而不是相对于页面）
这些坐标需要显示在 div 内，class="ddd"
如果可能，坐标应在每 10 个像素处注册一次（10,10 - 20,10 等，而不是 1,1 - 2,1 - 3,1...）

我更喜欢 jquery 函数，但我也愿意接受其他方法（javascript 或其他方法）。

【问题讨论】：

获取相对于 .ccc 元素的坐标：获取页面坐标并减去元素坐标

标签： function coordinates coordinate-systems jquery

【解决方案1】：

<script>    
$(document).ready(function () {
    $('.ccc').mousemove(function (e) {
        $('.ddd').text("( " + (e.clientX - $(this).offset().left) + ", " + (e.clientY - $(this).offset().top) + " )");
    });
});
</script>

这里是工作示例：fiddle

【讨论】：