2013-02-01 106 views
17

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

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

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

此代码的工作完美:

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

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

+1

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

+0

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

回答

19

使用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

+0

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

+0

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

-1

从jQuery的网站摘自:Jquery Tutorial site

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

注:固定的语法

+0

为什么这标志着下来? –

+0

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

+3

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

2

使用event.layerXevent.layerY获得相对于当前元素的鼠标位置:

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

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

+0

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

+0

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