0

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';


    }
4

1 に答える 1

3

マークアップと 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 の$.mousemove()であり、ブラウザー間の違いを解消します。

于 2012-02-04T14:25:49.623 に答える