자스크립트로 마우스 위치 얻기(IE, FF)

Dev/Web

자스크립트로 마우스 위치 얻기(IE, FF)

newtype 2006. 5. 23. 14:32

자바스크립트를 사용해 마우스 좌표를 얻고자 한다. 마우스 좌표를 얻기 위해서는 이벤트 객체를 이용해야 하는데, Internet Explorer(이하 IE)와 Firefox(이하 FF)가 이벤트 객체를 이용하는 방법이 서로 틀리다. IE의 경우를 먼저 살펴 보자.

<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--

   function doMove()
   {
       var divLayer = document.getElementById('result');
       var x, y;

       x = event.x;
       y = event.y;

       divLayer.innerHTML = "| " + x + " X " + y + " |";
   }

//-->
</SCRIPT>
<DIV id=captureObj onmouseover="this.setCapture();" onmouseout="this.releaseCapture();" 
     onmousemove="doMove();">Mouse Pointer Over</DIV>
<DIV id=result style=color:red></DIV>
</DIV>
</BODY>

이것이 IE에서 마우스 위치를 얻는 전체 소스 이다. 먼저, 움직임을 감지할 영역 captureObj를 잡는다. 이 영역에 마우스가 올라가면 captureObj의 setCapture() 메소드를 이용해 마우스 위치 추적을 시작한다. 이 영역에서 마우스가 빠져나가면 releaseCapture() 메소드를 이용해 마우스 위치 추적을 종료 한다. 마우스의 좌표는 event객체의 x, y를 이용해 얻을 수 있다. FF의 경우를 살펴 보자

<BODY onload="initMouseCapture();">
<SCRIPT LANGUAGE="JavaScript">
<!--

  var eventValue;   

  function doMove()
   {
       var divLayer = document.getElementById('result');
       var x, y;

       x = eventValue.pageX;
       y = eventValue.pageY;

       divLayer.innerHTML = "| " + x + " X " + y + " |";
   }

   function SaveMouseEvent(e)
   {
      eventValue = e;
   }

   function initMouseCapture()
   {
           document.addEventListener('mousemove',SaveMouseEvent,false);
   }   

//-->
</SCRIPT>
<DIV id=captureObj onmousemove="doMove();">Mouse Pointer Over</DIV>
<DIV id=result style=color:red></DIV>
</DIV>
</BODY>

이것이 FF에서 마우스 위치를 얻기위한 전체 소스이다. FF에서는 일단 이벤트로 등록을 해야한다. body의 onload에서 SaveMouseEvent함수를 mousemove이벤트의 이벤트 리스너로 등록을 한다. 이벤트 리스너로 등록된 SaveMouseEvent함수는 파라미터로 이벤트 객체를 받고 전역변수에 발생한 이벤트 객체를 저장해 둔다. captureObj 위에서 마우스가 움직이면, 전역변수 eventValue의 pageX, pageY를 참조해 마우스 좌표를 얻는다. 이렇게 각 브라우져 마다 마우스 위치를 얻는 방법은 알았다. 그럼 브라우져 구분은 어떻게 할까?

    function checkIE()
   {
       if (navigator.appName == "Microsoft Internet Explorer")
           isIE = true;
       else
           isIE = false;
   }

부라우져를 구분하는 함수를 하나 만들었다. navigator객체의 appName 값을 확인해 보면 알 수있다. 이제까지의 방법을 이용해 IE와 FF에서 모두 동작하는 스크립트를 작성해 보자.

<BODY onload="initMouseCapture();">
<SCRIPT LANGUAGE="JavaScript">
<!--

   var isIE;
   var eventValue;

   function checkIE()
   {
       if (navigator.appName == "Microsoft Internet Explorer")
           isIE = true;
       else
           isIE = false;
   }

   function startMouseCapture(objCapture)
   {
       if ( isIE == false )
           return;

       objCapture.setCapture();
   }

   function endMouseCapture(objCapture)
   {
       if ( isIE == false )
           return;

       objCapture.releaseCapture();
   }

   function doMove()
   {
       var divLayer = document.getElementById('result');
       var x, y;

       if ( isIE == false )
       {
           x = eventValue.pageX;
           y = eventValue.pageY;
       }
       else
       {
           x = event.x;
           y = event.y;
       }

       divLayer.innerHTML = "| " + x + " X " + y + " |";
   }

   function SaveMouseEvent(e)
   {
      eventValue = e;
   }

   function initMouseCapture()
   {
       checkIE();

       if (isIE == false)
       {
           document.addEventListener('mousemove',SaveMouseEvent,false);
       }
   }   

  
//-->
</SCRIPT>
<DIV id=captureObj onmouseover="startMouseCapture(this);" 
    onmouseout="endMouseCapture(this);" onmousemove="doMove();">
<TABLE height=100 width=100 border=0 bgcolor=#66CC66>
<TR align=center>
   <TD align=vcenter>Mouse Pointer Over</TD>
</TR>
</TABLE>

</DIV>
<DIV id=result style=color:red></DIV>
</DIV>
</BODY>

이 코드는 FF 1.5.0.3, IE 6.0.2900.2180에서 테스트 해보았다.