在元件的JavaScript鼠標位置（代碼不工作）

我想顯示的鼠標位置當它的一個元素..繼承人裏面的代碼：在元件的JavaScript鼠標位置（代碼不工作）

 




Mouse Events Example 


function GetMousePositionInElement(ev, element) 
      { 
       var osx = element.offsetX; 
       var osy = element.offsetY; 

       var bottom = osy + element.height(); 

       var x = ev.pageX - osx; 
       var y = bottom - ev.pageY; 

       return { x: x, y: y, y_fromTop: element.height() - y }; 
      } 
    function handleEvent(oEvent) { 
     var oTextbox = document.getElementById("txt1"); 
     var elem = document.getElementById("div1"); 
     var xp = GetMousePositionInElement(oEvent, elem).x; 
     var yp = GetMousePositionInElement(oEvent, elem).y; 

     oTextbox.value += "\n x = " + xp + "y= " + yp; 

    } 



 Use your mouse to click and double click the red square. 
div style="width: 100px; height: 100px; background-color: red" 
    onmouseover="handleEvent(event)" 
    id="div1"> /div 
 textarea id="txt1" rows="15" cols="50"> /textarea>

有一個在代碼中的問題。鼠標位置不顯示在texArea內部。爲了使代碼正常工作和正常工作，我必須做些什麼改變？（of-cource並非所有的代碼都顯示出來，我刪除了一些<和> inoder向你展示了代碼中的某些部分，但是代碼語法是正確的，但這不是問題）

謝謝。

來源

2009-12-02 Muaz

var osy = element.offsetY;

有沒有這樣的財產offsetY。你可能會想到offsetTop。但請注意，offsetLeft/Top值與offsetParent不相關。如果你想相對頁面座標，你會需要遍歷offsetParents，或者，因爲你似乎包括了jQuery，調用它的offset功能做到了這一點：

var offset= $(element).offset(); 
var osx= offset[0], osy= offset[1];

VAR底部= OSY + element.height（）;

element是DOM HTMLDivElement對象，而不是一個jQuery包裝對象，所以它不具有height()方法。要麼添加封套：

var bottom= osy+$(element).height();

或使用等效的DOM方法：

var bottom= osy+element.offsetHeight;

變種Y =底部 - ev.pageY;

注意pageY不是DOM事件標準的一部分，也不適用於IE。您可以使用標準clientY屬性並調整頁面的scrollTop來計算它。再次，jQuery的爲您完成此，加入火狐pageY擴大到所有的瀏覽器，當你使用它自己的方法來綁定事件處理程序：

$('#div1').mouseover(handleEvent);

，而不是在線onmouseover=...事件處理程序的屬性。

來源

2009-12-02 21:34:12 bobince

在元件的JavaScript鼠標位置（代碼不工作）

回答

相關問題