Mozilla 한국 커뮤니티

<script>
function ws(e) { 
   alert(e.pageX);
   return false;
} 

</script>

<form onsubmit='return ws(event)'>
<input type=text onclick=ws(event)>
<input type=submit>
</form>

submit시 현재 마우스의 이벤트를 잡을려고 합니다.

첫번째로 위와 같이 시도를 했습니다.

하지만 익스와 다르게,
마우스이벤트라면 [object MouseEvent],
오브젝트에서 일어난 이벤트라면 [object Event] 로 엘리먼트에 따라 구분을 하더군요.

익스는 (메소드에 따라?)타입을 자동으로 구분하는건지 별 문제가 없는데 말입니다.

그래서 아래와 같이 document에 addEventListener를 먹여 마우스 관련 이벤트를 물려 함수에 연결하였습니다.

Code: Select all

function SaveMouseEvent(e)
{
   if(!e) var e = window.event;
   MouseEventValue = e;
}

document.addEventListener('mousedown',SaveMouseEvent,false);
document.addEventListener('mouseenter',SaveMouseEvent,false);
document.addEventListener('mouseleave',SaveMouseEvent,false);
document.addEventListener('mousemove',SaveMouseEvent,false);
document.addEventListener('mouseout',SaveMouseEvent,false);
document.addEventListener('mouseover',SaveMouseEvent,false);
document.addEventListener('mouseup',SaveMouseEvent,false);
document.addEventListener('mousewheel',SaveMouseEvent,false);

MouseEventValue 변수를 이벤트를 저장하였습니다.
그 다음 ws함수를 아래와 같이 변경 하였습니다.

Code: Select all

function ws() { 
   e = MouseEventValue;
   alert(e.pageX);
   return;
}

총코드

Code: Select all

<script> 
function ws() {
   e = MouseEventValue; 
   alert(e);
   alert(e.pageX); 
   return; 
} 

function SaveMouseEvent(e) 
{ 
   MouseEventValue = e; 
} 

document.addEventListener('mousedown',SaveMouseEvent,false); 
document.addEventListener('mouseenter',SaveMouseEvent,false); 
document.addEventListener('mouseleave',SaveMouseEvent,false); 
document.addEventListener('mousemove',SaveMouseEvent,false); 
document.addEventListener('mouseout',SaveMouseEvent,false); 
document.addEventListener('mouseover',SaveMouseEvent,false); 
document.addEventListener('mouseup',SaveMouseEvent,false); 
document.addEventListener('mousewheel',SaveMouseEvent,false);

</script> 

<form onsubmit=ws(event)> 
<input type=text onclick=ws(event)> 
<input type=submit> 
</form>

확인결과 MouseEventValue 이벤트형은 마우스 이벤트형으로 원하는 이벤트를 가져왔습니다. 하지만.. 이 마우스이벤트가 좌표값이 0으로 나옵니다.
이벤트를 변수에 저장하게 되면 이벤트값은 혹시 소멸 되는건가요???

클릭했을경우는 이벤트값이 제대로 되어있는데,
엔터키(submit시)를 눌리면 값이 0으로 나오는 것을 확인 하실 수 있습니다.

어떻게 해야하는지 궁금합니다.

이벤트를 함수 인자로 넘겨도 변수값은 초기화되지 않습니다.
지금 소스를 대충 훑어봐서 정확히 확답은 안되겠습니다만,
ws()의 용법이 잘못된 것 같습니다.

어쨌거나, 현재(!) 마우스의 X,Y좌표는 다음처럼 구합니다.

Code: Select all

function mouseX(e) { 
	var posx = 0;
	if (!e) var e = window.event;
	if (e.pageX)
	{
		posx = e.pageX;
	}
	else if (e.clientX)
	{
		posx = e.clientX + document.body.scrollLeft;
	}
	return posx;
}

function mouseY(e) { 
	var posy = 0;
	if (!e) var e = window.event;
	if (e.pageY) { //FF
		posy = e.pageY;
	}
	else if (e.clientY)	{ //IE
		posy = e.clientY + document.body.scrollTop;
	}
	return posy;
}

문제는, submit버튼을 눌렀을때(클릭이 아니라) 발생하는 이벤트는 마우스 이벤트가 아니기 때문에 e.pageX 따위값이 들어있지 않습니다.

딱히 바람직한 방법은 아니지만 지금 간단히 생각해본 해결책은, document.onmousemove에 이벤트를 걸어, 마우스가 움직일 때마다 X,Y좌표를 기억하게 하는 것입니다. MOUSE()라는 전역 Object를 만들고 그 멤버 변수로 x, y값을 기억하게 해두면 되겠지요. 그리고 마우스위치값이 필요할 때 그 Object의 값을 확인해보면 되겠죠?

Code: Select all

var Mouse = new MOUSE();
Mouse.init();
...
function ws() {
alert(Mouse.X + ":" + Mouse.Y);
}

이벤트 x,y좌표를 기억하게 하신다고 하셨는데, 이벤트 자체를 저장할 수 있는지요?

Mozilla 한국 커뮤니티

submit시 현재 마우스좌표 구하기..문제

submit시 현재 마우스좌표 구하기..문제

답변 감사드립니다.