[jQuery] 이벤트 발생 시 마우스 정보 - screenX, screenY, pageX, pageY, clienX, clientY, offsetX, offsetY

Front-End/jQuery

[jQuery] 이벤트 발생 시 마우스 정보 - screenX, screenY, pageX, pageY, clienX, clientY, offsetX, offsetY

리딩리드 2017. 1. 6. 16:55

이벤트 발생 시 마우스 정보 - screenX, screenY, pageX, pageY, clienX, clientY, offsetX, offsetY

1. 정의

속성	개요
screenX	스크린 상의 x 좌표
screenY	스크린 상의 Y 좌표
pageX	페이지 상의 x 좌표
pageY	페이지 상의 y좌표
clientX	표시 영역 상의 x 좌표
clientY	표시 영역 상의 Y좌표
offsetX	요소 영역 상의 x좌표
offsetY	요소 영역 상의 y좌표

2. 예제

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> </head> <div id="outer" style="position:absolute; maring: 50px; top:30px; left:30px; width:300px; height:300px; border : solid 1px black"></div> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $('#outer').on('mousemove', function(e){ $(this).html( 'screen:' + e.screenX + '/' + e.screenY + '<br/>'+ 'page:' + e.pageX + '/' + e.pageY + '<br/>'+ 'client' + e.clientX + '/' + e.clientY + '<br/>'+ 'offset' + e.offsetX + '/' + e.offsetY + '<br/>' ); }); </script>