1

イベント属性 clientX および clientY の使用法をよりよく理解しようとしています。

マウス ポインターが特定の div の上を移動するときに、マウス ポインターの上下のオフセットを見つける必要があります。projectImage(x) 関数は、div の onmouseover にアタッチされています。x は、特定の画像の URL を決定できる関数の引数です。

今。clientX は、マウスオーバー イベントが発生した時点でのポインターの左オフセットです。

以下の関数が機能しません (JS コンソールで定義されていないと報告されています) 最初の 2 行の構文エラーが原因だと思います。

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";

}
4

2 に答える 2

2

あなたがしなければならないことは、イベントオブジェクトを関数に渡すことだけです (そして、引数を少しリファクタリングするかもしれません):

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

event || window.eventIE はイベント オブジェクトを引数としてイベント ハンドラに渡さず、 を介して取得する必要があるため、 が必要です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-27T16:02:44.653 に答える
1

@FelixKling が言及しているように、イベント オブジェクトを渡す必要があります。

addEventListenerインライン イベントも使用する代わりに/に切り替えることをお勧めします。ここattachEventに例を示します。

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-27T16:01:13.297 に答える