Top

[Javascript] 파이어 폭스 event.x, event.y | Web-Programing
김경훈 (admin) | Editor | 2013/12/13 17:44:29 | 조회:7044

파이어 폭스에서 event.x, event.y 사용

 

예를들어 아래와 같이 IE에서 클릭한 지점의 x, y좌표를 구하는 자바스크립트가 있다고 하자.

 

document.getElementById("qlayer").style.pixelLeft=(document.body.scrollLeft+event.x) ;
document.getElementById("qlayer").style.pixelTop=(document.body.scrollTop+event.y);

 

이를 파이어폭스에서 동작을 하게 하려면 반드시 event를 사용할 경우 파라미터로 event인자를 전달할 것.

 

function viewLayer(test, test1, event)

 

또한 IE에선 pixelLeft, pixelTop 사용했지만 파이어폭스에선 아래와 같이 사용할 것.

 

document.getElementById("qlayer").style.left=(event.clientX)  + "px";
document.getElementById("qlayer").style.top=(event.clientY)  + "px";

 

반드시 "px"를 붙여줄 것.

 

브라우저 체크하는 정석은 아니지만 간단히 하자면

 

if(document.all)
{

    document.getElementById("qlayer").style.pixelLeft=(document.documentElement.scrollLeft + event.x) ;
    document.getElementById("qlayer").style.pixelTop=(document.documentElement.scrollTop + event.y) ;
}
else

{
     document.getElementById("qlayer").style.left=(document.documentElement.scrollLeft + event.clientX) + "px";
     document.getElementById("qlayer").style.top=(document.documentElement.scrollTop + event.clientY) + "px";
}

 

참고.

 

최근 웹표준과 접근성 향상의 동향에 따라 소스 처음에 DOCTYPE에서 DTD 지정을 하고 있습니다. 이때 document.body.scrollTop은

더이상 사용되지 않고 대신 document.documentElement.scrollTop을 제공합니다. 따라서 document.body.scrollTop을

document.documentElement.scrollTop으로 바꾸면 됩니다.

 

보통 웹표준에 대하여 이해하지 못하는 경우 doctype 선언을 제거하는 방법으로 이 문제를 해결하는 경향이 있으나

이것은 바른 선택이 아닙니다.



출처 : http://blog.naver.com/zamzacs?Redirect=Log&logNo=80058572324

 

 

DTD버전에 따른 document.documentElement, document.body 사용

 

Browser

DOM Properties 

HTML 4.01
 - loose.dtd

HTML 4.01 
- strict.dtd

XHTML 1.0 
- transitional.dtd

XHTML 1.0
 - strict.dtd

XHTML 1.1

IE
6.0 / 7.0

documentElement.scrollLeft

body.scrollLeft

Firefox 
2.0.0.6

documentElement.scrollLeft

body.scrollLeft

Opera 
9.10

documentElement.scrollLeft

body.scrollLeft

Safari 
3.0.3

documentElement.scrollLeft

body.scrollLeft

Netscape 
9.0b2

documentElement.scrollLeft

body.scrollLeft



출처 : http://cafe.naver.com/requirements/559

공유하기
공유하기
0
0
0


댓글을 불러오는 중입니다.
▲ 이전글 좋은 사이트 하나 있어서 공유합니다. 이강현 (lkhtt) 2014-02-04 09:35:52
▼ 다음글 [공통] 도메인(URL) 유효성 체크. 김경훈 (admin) 2013-12-10 09:55:53