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/

请注意，正如Jeffrey所提到的，附加到window.onmousemove可能更常见：

window.onmousemove = mymove;

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

下面是鼠标事件位置属性情况下的克斯默德。不过，这是几年前的事了。

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