e.pageX和e.pageY無法正常工作？

我試圖在鼠標單擊時放置光標所在的位置。所以當我使用e.PageX和e.pageY時，實際上我的div遠遠低於預期。有任何想法嗎？e.pageX和e.pageY無法正常工作？

var mouseX = e.pageX; 
var mouseY = e.pageY; 
$("#moverdiv").css({'top':mouseY,'left':mouseX});

來源

2012-10-04 Mike

'＃moverdiv'的定位是什麼？ – Musa

我把它設置爲絕對 – Mike

那麼絕對位置元素的左/右屬性是相對於其第一個非靜態定位的祖先。發佈您的標記可能會有所幫助。 – Musa

這個工作對me.Try此：

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="jquery.js"></script> 
    <script> 
     $(document).ready(function(){ 
      $(document).click(function(e){ 
      var mouseX = e.pageX; 
      var mouseY = e.pageY; 
      $("#moverdiv").css({'top':mouseY, 'left':mouseX}); 
      }); 

     }); 
    </script> 
    <style type="text/css"> 
     #moverdiv{ 
      position: absolute; 
      top: 0px; 
      left: 0px; 
      background-color: #000; 
      width: 100px; 
      height: 100px; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="moverdiv"></div> 
    </body> 
</html>

而這正是demo

來源

2012-10-04 00:36:10

如果窗口有滾動條，這不能正常工作。滾動div後不對齊點擊位置。 –

pageX屬性的定義是：

pageX屬性是用於像素的整數值當鼠標事件觸發時，鼠標指針相對於整個文檔的X座標。該屬性考慮了頁面的任何水平滾動。

如果你把這種代碼：

$(document.body).click(function(mouseEvent) { 

     $("#MyDiv").css({ 
      'top': mouseEvent.pageY, 
      'left':mouseEvent.pageX 
     }); 
    });

它完美地工作。

如果div不在所需的位置，它會因爲您的DIV可能具有與身體不同的反射點（與瀏覽器的左上角不同）。

事實上，絕對定位元素指的是第一個參考父母。如果沒有找到參考父母，則最終參考父母是身體。也許你有一個具有CSS屬性的中間元素：職位：相對。這個CSS屬性使該元素成爲定位和引發轉變的參考。

來源

2012-10-04 00:36:48 MatRt

爲了避免由於父元素的「位置：相對」而導致的移位，請使用「#MyDiv」的「position：fixed」。警告！只有沒有滾動條才能按預期工作！ –

在滾動條的情況下，您需要減去當前的滾動位置（請查看https://stackoverflow.com/a/2481776/2484903）。 –

e.pageX和e.pageY無法正常工作？

回答

相關問題