2012-02-04 3 views
0

onmousemove 이벤트에서 javascript로 왼쪽 및 위쪽 스타일 요소를 변경하려고하지만 작동하지 않습니다. 13. OnMouseMove에서는 이벤트에 대한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'; 


    } 
+2

'var event = new MouseEvent (e);'문을 사용하지 마십시오. 함수 인수가 이미 올바른 이벤트 객체입니다. 그냥 사용하십시오. –

답변

3

마크 업 및 CSS에 추측. 또한 브라우저마다 e 속성이 변경 될 수도 있습니다. 이것은 Firefox (9)에서 작동합니다.

CSS

#mye { 
    height: 25px; 
    width: 250px; 
    position: absolute; 
    background: #ddd; 
} 

마크 업

<div id="mye">Content</div> 

자바 스크립트

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()입니다. 그러면 브라우저 간의 차이가 없어집니다.

+1

이벤트를 창에 적용하는 것이 더 바람직하지 않습니까? –

+0

가능합니다. 단지 그들이하려는 일에 달려 있습니다. [window.onmousemove'의 데모] (http://jsfiddle.net/3YdEa/4/). –

관련 문제