브라우저 제목

이벤트 속성

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);

})

});

 

제목 날짜
포트폴리오 샘플 2020.05.21
데스크탑, 모바일 구분 접속 2019.02.11
터치이벤트, pc환경과 모바일 환경 알아내기 file 2020.05.04
코르도바 를 설정하기 위한 방법 file 2020.04.26
sticky position file 2020.04.22
webfont file 2020.04.21
video file 2020.04.15
audio2 file 2020.04.15
audio 2020.04.11
wheel이벤트3 file 2020.04.11
wheel이벤트2 file 2020.04.11
wheel이벤트1 file 2020.04.11
드레그 앤 드롭 효과 예제 file 2020.04.03
드레그 앤 드롭 효과 원리 file 2020.04.03
슬라이드 페이지 네이션 file 2020.04.02
좌/우 슬라이드 슬라이드 개수처리, 너비 처리 file 2020.04.02
모바일 작업 file 2020.04.02
자격증 슬라이드 기본 2020.03.30
스크롤바 없에는 css 2020.03.30
터지이벤트와 mouseup, mousedown이벤트 2020.03.28
태그 목록