事件標識符 - ClientX和ClientY

我想更好地理解事件屬性clientX和clientY的用法。事件標識符 - ClientX和ClientY

我需要找到鼠標指針在特定div上移動時的頂部和左側偏移量。 projectImage（x）函數附加到div的onmouseover。 x是一個函數參數，根據該參數可以確定特定圖像的URL。

現在。 clientX是指針在鼠標懸停事件發生時的左偏移量，所以我可以在事件中輸入什麼內容event.clientX

下面的函數不起作用（報告爲未由JS控制檯定義）我認爲是因爲在前兩行中有語法錯誤。

function projectImage(x) 
{ 

// Should the 1st two lines (right hand side) be x.clientY and x.clientX, 
// x is a function argument not event relevant to the pointer offset though 

    var toffset = x.clientY ; // help_me_here.clientY 

    var loffset = x.clientX ; // Event_Identifier_??.cleintX  

    var picdiv = document.getElementById("picdiv") ; 
    picdiv.style.position = "absolute" ; 
    picdiv.style.left = loffset + "px" ; 
    picdiv.style.top = toffset + "px" ; 
    picdiv.innerHTML = "<img src='" + "http://imageServer.com/" + x.split("|")[1] + "' width='30px' />" ; 

    picdiv.style.visibility = "visible"; 

}

來源

2012-12-27 varun Kishnani

如何調用'projectImage'？「x」究竟是什麼？ –

Joey

x是一個格式爲「name | id」的字符串，imageserver.com/123返回Joey的圖像 –

所以'x'是一個字符串...您應該傳遞事件對象，或者另外添加。 –

由於@FelixKling提到你應該傳遞事件對象。

我建議切換到addEventListener/attachEvent而不是使用內聯事件，我爲您設置了一個示例here。

var x = document.getElementById('x'); 
var y = document.getElementById('y'); 
document.getElementById('test').addEventListener('mousemove', function(e){ 
    x.innerHTML = 'X: ' + e.clientX; 
    y.innerHTML = 'Y: ' + e.clientY; 
});

如果您對在線活動是死心塌地，不過，你可以通過<div onmouseover="projectImage(event,'Joey|123');"> Joey </div>

來源

2012-12-27 16:01:13 Snuffleupagus

Hi Snuffle，這是最有用的..我已經轉移到添加事件列表。一旦遇到一個小問題，當正在解析用於附加帶有事件的函數的代碼時，正在調用附加到事件的函數。例如：\t \t \t \t \t \t \t \t \t \t的document.getElementById（「R」 + ID） - 閱讀進度 - （ '鼠標懸停'，projectImage（事件，朋友並[f] .split（「|」）[0]），假）; –

與此同時，我將從頭開始閱讀DOM文檔，自我學習的非專業編碼人員的問題是我們不從基礎開始，我們從任何地方開始我們可以 –

@ user1812787啊，那是因爲你調用該函數而不是傳遞參考。如果你想不帶任何參數地完成它，你可以只傳遞它'projectImage'（沒有括號），或者你可以聲明一個新的匿名函數來傳遞它的參數。 'function（e）{projectImage（e，friends [f] .split（「|」）[0]）;}'事件函數自動傳遞事件對象，所以'function（e）'中的'e'是隻是爲了挑選。 – Snuffleupagus

所有您需要做的是通過事件對象的函數（也許重構的論點有點做）：

<div onmouseover="projectImage(event || window.event, 'Joey', 123);"> Joey </div>

event || window.event需要因爲IE不傳遞事件對象作爲參數傳遞給事件處理程序，因此具有通過window被檢索。

而且改變你的函數可以訪問這些參數：

function projectImage(event, name, id) { 
    var toffset = event.clientY; 
    var loffset = event.clientX; 

    var picdiv = document.getElementById("picdiv") ; 
    picdiv.style.position = "absolute" ; 
    picdiv.style.left = loffset + "px" ; 
    picdiv.style.top = toffset + "px" ; 
    picdiv.innerHTML = "<img src='http://imageServer.com/" + id + "' width='30px' />" ; 

    picdiv.style.visibility = "visible"; 
}

使用有意義的變量名稱有助於理解代碼更容易。

來源

2012-12-27 16:02:44

事件標識符 - ClientX和ClientY

回答

相關問題