2010-08-19 5 views
17

창과 관련된 정확한 마우스 위치를 얻으려고합니다. 여기 jquery 마우스 위치 관련 창

내 문제가

...
  • document.height = 1600

    (실제 문서 크기)
  • window.height = 400 (볼)

나는에 마우스 위치를 알아 내야 이 창은 pageY 속성이 제공하는 문서가 아닙니다.

큰 툴팁인데, 테이블 항목에 대한 mouesover에 나타납니다. 화면 하단에 여유 공간이 충분하지 않으면 (윈도우가 최대 임) 툴팁이 포인터 위, 그렇지 않으면 포인터 아래에 표시됩니다. 이것은 문서 크기가 pagesize (long table)보다 커질 때까지 제대로 작동합니다.

감사합니다, 뤽

당신은 다음과 같이 창에 위치를 얻기 위해 페이지 Y에서 window.scrollTop()을 뺄 수

답변

34

:

var top = e.pageY - $(window).scrollTop(); 

You can give it a try here, take a look at the console.

+0

너희들은 최고야. 그랬어! 고맙습니다!! – user425772

+1

@lucl - 환영합니다 :) 그리고 오신 것을 환영합니다! –

+0

위대한 솔루션과 너무 간단합니다. OP는 해결책으로 표시해야합니다. –

0

document.body.scrollTop 속성은 스크롤 한 픽셀을 포함합니다. 나는 간단한 페이지 Y를 믿는다 - scrollTop은 충분해야한다?

4

그리고 window.pageYOffset은 어떻습니까?

데모 :

<html> 
<head> 
<style> 
    html,body {padding:0;margin:0} 
    #content {height:2048px;background-color:#ccc;} 
    #status {position:fixed;top:0;left:0;} 
</style> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript"> 
jQuery(document).ready(function(){ 
    $(document).mousemove(function(e){ 
     $('#status').html(e.pageX +', '+ (e.pageY - window.pageYOffset)); 
    }); 
}) 
</script> 
<body> 
<h2 id="status">0, 0</h2> 
<div id="content"></div> 
</body> 
</html> 
0
function showCoords(evt){ 
    alert(
    "clientX value: " + evt.clientX + "\n" 
    + "clientY value: " + evt.clientY + "\n" 
); 
} 

나는 이것이 당신이 찾고있는 무엇을 생각합니다. 자세한 내용은 here from Mozilla Developer을 참조하십시오.