在div中获取鼠标位置？

问题描述：

可能重复：
Mouse position relative to div
getting mouse position with javascript within canvas 在div中获取鼠标位置？

我怎样才能得到一个画布大小是固定的，但有一个自动内缘鼠标的位置？

我不能使其位置固定，不能只使用页面上的常规鼠标位置。

此代码的工作完美：

mouseX = e.pageX - div.offsetLeft; 
mouseY = e.pageY - div.offsetTop;

谷歌是你的朋友 - http://api.jquery.com/mousemove/ –

请张贴一些示例代码为[的jsfiddle（HTTP：/ /jsfiddle.net/）或另一个喜欢它，如果你有一个特定的问题来检查。 – oomlaut

请不要删除重复的链接;评论者仍然希望看到你的问题被关闭*为*。 –

答

使用jQuery：

var divPos = {}; 
var offset = $("#divid").offset(); 
$(document).mousemove(function(e){ 
    divPos = { 
     left: e.pageX - offset.left, 
     top: e.pageY - offset.top 
    }; 
});

+36

怎么样不使用jQuery – bryan

@bryan - 我确信它可以在没有jQuery的情况下完成，但它会非常复杂 – PitaJ

MDN说'pageX'不是标准的，不应该使用。 https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/pageX我在使用foreignObject时遇到了一些麻烦。 – Charles

答

从jQuery的网站摘自：Jquery Tutorial site

$(document).mousemove(function(e){ 
     $('#status').html(e.pageX +', '+ e.pageY); 
    });

注：固定的语法

为什么这标志着下来？ –

因为'pageX'和'pageY'不是相对于容器。 – dmackerman

我们得到它，这个答案是没有用的，没有必要保持downvoting它！ – Sheljohn

答

使用event.layerX和event.layerY获得相对于当前元素的鼠标位置：

$('#canvas').mousemove(function(e){ 
    var mousePos = {'x': e.layerX, 'y': e.layerY}; 
});

这是一个很酷的。功能，太糟糕了它的过时 – blex

@blex它不会被弃用，这是不规范：https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/layerX – DevAntoine

还应该提到这由于Layer的定义可能会导致一些严重问题通过简单的手腕轻轻地改变，从而改变layerX和layerY。 – JosephMCasey

在div中获取鼠标位置？

相关推荐