onmousemove事件

Question

我想在onmousemove事件上用javascript更改左边和顶部样式元素，但它不起作用。

我对的OnMouseMove事件代码：

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

猜测的标记和CSS。另外，我认为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鼠标事件位置财产的情况。但是，这已经过了几年了。

这是另一个StackOverflow question，当然还有jQuery's $.mousemove()，这将消除浏览器之间的差异。