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 Sweeney所提到的，附加到window.onmousemove可能更常见：

window.onmousemove = mymove;

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

这是鼠标事件位置属性情况的Quirksmode。然而，这已经有几年了。

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