이벤트 속성
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);
})
});