SeouliteLab

jQuery로 마우스 이벤트의 수직 위치 파악하기 본문

프로그래밍

jQuery로 마우스 이벤트의 수직 위치 파악하기

Seoulite Lab 2024. 4. 2. 13:31

마우스 이벤트는 웹 페이지에서 사용자와 상호작용하는데 중요한 역할을 합니다. jQuery의 event.pageY 속성을 사용하면 마우스 이벤트가 발생한 위치의 수직 좌표를 얻을 수 있습니다. 이를 활용하여 다양한 상황에서 마우스 이벤트를 처리할 수 있습니다.

예제 1: 클릭한 위치의 수직 좌표 출력

<!DOCTYPE html>
<html>
<head>
  <title>jQuery로 마우스 이벤트의 수직 위치 파악하기</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $(document).click(function(event){
        $('#result1').text('클릭한 위치의 수직 좌표: ' + event.pageY);
      });
    });
  </script>
</head>
<body>

<p>문서 내 어느 곳이든 클릭해보세요.</p>
<p id="result1"></p>

</body>
</html>

결과:

  • 문서 내 어느 위치를 클릭해도 해당 위치의 수직 좌표가 표시됩니다.

설명:
이 예제에서는 문서 전체에 클릭 이벤트를 등록하여 클릭한 위치의 수직 좌표를 출력합니다. event.pageY 속성을 사용하여 마우스 이벤트가 발생한 위치의 수직 좌표를 가져와서 결과로 출력합니다.

예제 2: 요소 내에서의 마우스 이동 좌표 출력

<!DOCTYPE html>
<html>
<head>
  <title>jQuery로 마우스 이벤트의 수직 위치 파악하기</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $('#target2').mousemove(function(event){
        $('#result2').text('마우스 이동 위치의 수직 좌표: ' + event.pageY);
      });
    });
  </script>
</head>
<body>

<div id="target2" style="width: 200px; height: 100px; background-color: lightblue;">마우스를 이동해보세요.</div>
<p id="result2"></p>

</body>
</html>

결과:

  • 요소 내에서 마우스를 이동하면 해당 위치의 수직 좌표가 표시됩니다.

설명:
이 예제에서는 특정 요소에 마우스 이동 이벤트를 등록하여 마우스가 해당 요소 내에서 이동할 때의 수직 좌표를 출력합니다. event.pageY 속성을 사용하여 마우스 이벤트가 발생한 위치의 수직 좌표를 가져와서 결과로 출력합니다.

예제 3: 드래그한 거리에 따른 이벤트 처리

<!DOCTYPE html>
<html>
<head>
  <title>jQuery로 마우스 이벤트의 수직 위치 파악하기</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      var startY, endY;
      $('#target3').mousedown(function(event){
        startY = event.pageY;
      });
      $('#target3').mouseup(function(event){
        endY = event.pageY;
        var distance = endY - startY;
        if (distance > 0) {
          $('#result3').text('아래로 ' + distance + ' 픽셀 이동');
        } else if (distance < 0) {
          $('#result3').text('위로 ' + (-distance) + ' 픽셀 이동');
        } else {
          $('#result3').text('이동하지 않음');
        }
      });
    });
  </script>
</head>
<body>

<div id="target3" style="width: 200px; height: 100px; background-color: lightgreen;">마우스를 누른 채로 드래그해보세요.</div>
<p id="result3"></p>

</body>
</html>

결과:

  • 요소를 마우스로 드래그하면 드래그한 방향과 거리에 따라 이동한 픽셀 수가 출력됩니다.

설명:
이 예제에서는 마우스를 누른 채로 드래그한 거리에 따라 이동한 픽셀 수를 계산하여 출력합니다. 이를 통해 마우스 드래그 동작에 따라 다양한 이벤트 처리를 할 수 있습니다.

예제 4: 이벤트 위임을 통한 여러 요소의 수직 좌표 출력

<!DOCTYPE html>
<html>
<head>
  <title>jQuery로 마우스 이벤트의 수직 위치 파악하기</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $('#container4').on('click', '.target', function(event){
        var pageY = event.pageY;
        var targetId = $(

this).attr('id');
        $('#result4').text(targetId + '의 위치: ' + pageY);
      });
    });
  </script>
</head>
<body>

<div id="container4">
  <div id="target4-1" class="target" style="width: 100px; height: 50px; background-color: lightpink;">요소 1</div>
  <div id="target4-2" class="target" style="width: 150px; height: 70px; background-color: lightblue;">요소 2</div>
  <div id="target4-3" class="target" style="width: 120px; height: 60px; background-color: lightgreen;">요소 3</div>
</div>
<p id="result4"></p>

</body>
</html>

결과:

  • 각 요소를 클릭하면 해당 요소의 수직 좌표가 출력됩니다.

이 예제에서는 이벤트 위임을 활용하여 여러 요소에 대한 클릭 이벤트를 한 번에 처리합니다. 각 요소를 클릭할 때 해당 요소의 수직 좌표를 출력하여 마우스 이벤트의 위치를 파악할 수 있습니다.

jQuery의 event.pageY 속성을 활용하면 마우스 이벤트가 발생한 위치의 수직 좌표를 쉽게 파악할 수 있습니다. 이를 활용하여 다양한 마우스 이벤트를 처리하고 웹 애플리케이션을 더욱 상호작용적으로 만들 수 있습니다.

저작자표시 비영리 변경금지

'프로그래밍' 카테고리의 다른 글

jQuery 이벤트 객체의 relatedTarget 속성 활용하기  (0) 2024.04.02
jQuery로 이벤트의 기본 동작 막기  (0) 2024.04.02
jQuery event.pageX 속성을 활용한 마우스 이벤트 처리  (0) 2024.04.02
jQuery event.namespace 속성을 활용한 이벤트 네임스페이스 관리  (0) 2024.04.02
jQuery event.metaKey 속성을 활용한 메타키 확인  (0) 2024.04.02
'프로그래밍' Related Articles more