onmousemoveイベント

Question

onmousemoveイベントでjavascriptを使用して左上のスタイル要素を変更したいが、動作しない。

れるonmousemoveイベントのための私のコード：マークアップとCSSに推測

function mymove(e) 
{ 
var event=new MouseEvent(e); 
    x = 20; 
    y = 10;  

    document.getElementById('mye').style.left = event.pageX + x+'px' ; 
    document.getElementById('mye').style.top = event.pageY - y+'px'; 


    } 

Answer 1

。また、私は、eのプロパティがブラウザごとに変わるかもしれないと思います。これはFirefox（9）で動作します。

CSS

#mye { 
    height: 25px; 
    width: 250px; 
    position: absolute; 
    background: #ddd; 
} 

マークアップ

<div id="mye">Content</div> 

Javascriptを

var mymove = function (e) { 
    var x = 20, 
     y = 10, 
     mye = document.getElementById('mye'); 

    mye.style.left = (parseInt(e.clientX) + x) + 'px'; 
    mye.style.top = (parseInt(e.clientY) - y) + 'px'; 
}; 

// Don't forget to add this in an onload or ondomready. 
document.getElementById('mye').onmousemove = mymove; 

http://jsfiddle.net/3YdEa/6/

そしてノートジェフリー・スウィーニーが言及したように、window.onmousemoveに取り付けることは、おそらくより一般的です：

window.onmousemove = mymove; 

http://jsfiddle.net/3YdEa/7/

ここでマウスイベント位置プロパティの状況に関するQuirksmodeです。しかしこれは数年前のことです。

もう1つはStackOverflow question、もちろんjQuery's $.mousemove()です。これはブラウザ間の違いをなくします。