파이어 폭스에서 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 | X | X | X | X | X | Firefox 2.0.0.6 | documentElement.scrollLeft | X | ○ | ○ | ○ | ○ | body.scrollLeft | ○ | X | X | X | X | Opera 9.10 | documentElement.scrollLeft | ○ | ○ | ○ | ○ | ○ | body.scrollLeft | ○ | ○ | ○ | ○ | ○ | Safari 3.0.3 | documentElement.scrollLeft | X | X | X | X | X | body.scrollLeft | ○ | ○ | ○ | ○ | ○ | Netscape 9.0b2 | documentElement.scrollLeft | X | ○ | ○ | ○ | ○ | body.scrollLeft | ○ | X | X | X | X
|
출처 : http://cafe.naver.com/requirements/559
|