이벤트 속성

screenX , screenY  : device 화면 기준으로 한 좌표

clientX , clientX  : 브라우저 화면을 기준으로 한 좌표(스크롤 미포함)

pageX , pageY  : 스크롤을 포함한 브라우저를 기준으로 한 좌표

mousedown,mouseup,mousemove 동작의 이해

html

<div class="wrap">

<div class="section-wrap">

<div class="section">

<div class="mou-down">

마우스를 <span class="down-text"></span><br>

마우스를 눌렀을 때 x의 위치 <span class="x"></span><br>

마우스를 눌렀을 때 y의 위치 <span class="y"></span>

</div>

<div class="mou-up">마우스에서 </div>

<div class="mou-move">마우스가</div>

<div class="mou-pos">

마우스 포지션<br>

x축 <span class="x-pos"></span><br>

y축 <span class="y-pos"></span><br>

</div>

</div>

<div class="section">섹션1</div>

<div class="section">섹션2</div>

</div>

</div>

css

@charset "utf-8";

html,body{

margin:0;

height:100%;

background:#eeeeee;

}

.wrap{

width:100%;

height:100%;

}

.section-wrap{

width:100%;

height:100%;

}

.section{

width:100%;

height:100%;

}

.section>div{

margin:20px;

}

js

$(function(){

var x_pos=0;

var y_pos=0;

$(".section-wrap").mousedown(function(e){

var x=e.pageX;

var y=e.pageY;

$(".down-text").text("마우스를 눌렀어요");

$(".x").text(x);

$(".y").text(y);

});

$(".section-wrap").mouseup(function(e){

$(".mou-up").text("마우스에서 땠어요");

});

$(".section-wrap").mousemove(function(e){

$(".mou-move").text("마우스가 움직이고 있어요");

x_pos=e.pageX;

y_pos=e.pageY;

$(".x-pos").text(x_pos);

$(".y-pos").text(y_pos);

})

});