반응형
자바스크립트를 사용해 마우스 좌표를 얻고자 한다. 마우스 좌표를 얻기 위해서는 이벤트 객체를 이용해야 하는데, Internet Explorer(이하 IE)와 Firefox(이하 FF)가 이벤트 객체를 이용하는 방법이 서로 틀리다. IE의 경우를 먼저 살펴 보자.
출처: http://newtype.pe.kr/tag/%ED%8C%8C%EC%9D%B4%EC%96%B4%ED%8F%AD%EC%8A%A4
[CODE type=javascript]
<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>
[/CODE]
[CODE type=javascript]<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>
[/CODE]
이것이 FF에서 마우스 위치를 얻기위한 전체 소스이다. FF에서는 일단 이벤트로 등록을 해야한다. body의 onload에서 SaveMouseEvent함수를 mousemove이벤트의 이벤트 리스너로 등록을 한다. 이벤트 리스너로 등록된 SaveMouseEvent함수는 파라미터로 이벤트 객체를 받고 전역변수에 발생한 이벤트 객체를 저장해 둔다. captureObj 위에서 마우스가 움직이면, 전역변수 eventValue의 pageX, pageY를 참조해 마우스 좌표를 얻는다. 이렇게 각 브라우져 마다 마우스 위치를 얻는 방법은 알았다. 그럼 브라우져 구분은 어떻게 할까?
[CODE type=javascript] function checkIE()
{
if (navigator.appName == "Microsoft Internet Explorer")
isIE = true;
else
isIE = false;
}
[CODE]
부라우져를 구분하는 함수를 하나 만들었다. navigator객체의 appName 값을 확인해 보면 알 수있다. 이제까지의 방법을 이용해 IE와 FF에서 모두 동작하는 스크립트를 작성해 보자
[CODE type=javascript]<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>
[/CODE]
이 코드는 FF 1.5.0.3, IE 6.0.2900.2180에서 테스트 해보았다. 출처: http://newtype.pe.kr/tag/%ED%8C%8C%EC%9D%B4%EC%96%B4%ED%8F%AD%EC%8A%A4
반응형
'Web > WEB기본' 카테고리의 다른 글
| [펌]HTML5와 HTML4의 차이점 (0) | 2008.06.25 |
|---|---|
| LightWindow 라이트박스의 업그레이드 (0) | 2008.06.10 |
| [펌]Yahoo User Interface Library(YUI) (0) | 2008.04.24 |
| javascript 이벤트 핸들러 (0) | 2008.04.22 |
| 링크에 대한 blur처리하기(css방식,script방식) (1) | 2008.04.01 |
| 외부문서 불러오기(AJAX) (0) | 2008.03.11 |
| [펌]웹해킹 시리즈 7) file upload 알고리즘 시의 주의할점 -4 (0) | 2008.01.23 |
| [펌]RFC 1945 Korean Edition(HTTP/1.0 Korean Version 3.0) (0) | 2008.01.11 |
도움이 되셨다면 하트모양의 "♡ 공감"을 눌러주시면 큰 격려가 됩니다.
(로그인하지 않으셔도 가능)
(로그인하지 않으셔도 가능)