Chapter 08. 위치/크기 관련 기능 다루기. Lesson 05. 마우스의 위치 및 크기 관련 기능

Chapter 08. 위치/크기 관련 기능 다루기.

Lesson 05. 마우스의 위치 및 크기 관련 기능

02. 핵심내용

핵심 01: 클릭한 전역 위치 구하기

핵심 02: 클릭한 지역 위치 구하기

핵심 01: 클릭한 전역 위치 구하기

01. 윈도우를 기준으로 하는 전역 위치

02. 문서를 기준으로 하는 지역 위치

1. 윈도우를 기준으로 하는 전역 위치

사용법 :

mouseEvent.clientX

mouseEvent.clientY

2. 문서를 기준으로 하는 전역 위치

사용법 :

mouseEvent.pageX

mouseEvent.pageY

예제 01. 패널(#panel)에서 클릭한 전역 위치 값, 페이지 위치 값을 #info에 출력해 주세요

핵심 02: 클릭한 지역 위치 구하기

사용법 : 

var offsetX = e.pageX - $(타깃).offset().left;

var offsetY = e.pageY - $(타깃).offset().top;

예제 02. 패널(#panel) 영역의 클릭한 위치로 물고기(#fish)를 이동시켜 주세요. 그리고 클릭한 위치 정보를 #info에 출력해 주세요

<script>
$(document).ready(function()
{   
    // 물고기 노드 구하기.
  var $fish = $("#fish");
  var $info = $("#info");
        
        $("#panel").click(function(e)
        {
    // 클릭한 위치 값 알아내기
    var offsetX = e.pageX - $(this).offset().left;
    var offsetY = e.pageY - $(this).offset().top;
            
    // 위치 값을 문자열로 만들기
    var strInfo = "offsetX = "+offsetX+", offsetY = "+offsetY;
            
    // 클릭한 위치 값 출력
    $info.html(strInfo);
            
        // 클릭한 위치로 이동
        $fish.css({
              left:offsetX,
              top:offsetY
        })
      })
})  
</script>