鼠标移动事件

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 问题，当然还有 jQuery 的 $.mousemove()，这将消除浏览器之间的差异。