SeouliteLab

jQuery event.pageX 속성을 활용한 마우스 이벤트 처리 본문

프로그래밍

jQuery event.pageX 속성을 활용한 마우스 이벤트 처리

Seoulite Lab 2024. 4. 2. 13:29

마우스 이벤트는 웹 애플리케이션에서 상호작용을 가능하게 합니다. jQuery의 event.pageX 속성은 마우스 이벤트가 발생한 위치의 수평 좌표를 반환합니다. 이를 활용하여 마우스 이벤트를 더욱 다양하게 처리할 수 있습니다.

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

<!DOCTYPE html>
<html>
<head>
  <title>jQuery event.pageX 예제</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.pageX);
      });
    });
  </script>
</head>
<body>

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

</body>
</html>

결과:

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

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

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

<!DOCTYPE html>
<html>
<head>
  <title>jQuery event.pageX 예제</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.pageX);
      });
    });
  </script>
</head>
<body>

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

</body>
</html>

결과:

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

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

예제 3: 마우스 드래그 시 시작점과 끝점의 수평 좌표 출력

<!DOCTYPE html>
<html>
<head>
  <title>jQuery event.pageX 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      var startX, endX;
      $('#target3').mousedown(function(event){
        startX = event.pageX;
        $('#result3').text('드래그 시작 위치: ' + startX);
      });
      $('#target3').mouseup(function(event){
        endX = event.pageX;
        $('#result3').append('<br>드래그 끝 위치: ' + endX);
      });
    });
  </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 event.pageX 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      var startX, endX;
      $('#target4').mousedown(function(event){
        startX = event.pageX;
      });
      $('#target4').mouseup(function(event){
        endX = event.pageX;
        var distance = endX - startX;
        if (distance > 0) {
          $('#result4').text('오른쪽으로 ' + distance + ' 픽셀 이동');
        } else if (distance < 0) {
          $('#result4').text('왼쪽으로 ' + (-distance) + ' 픽셀 이동');
        } else {
          $('#result4').text('이동하지 않음');
        }
      });
    });
  </script>
</head>
<body>

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

</body>
</html>

*결과:

*

  • 드래그한 방향과 거리에 따라 이동한 픽셀 수가 출력됩니다.

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

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

<!DOCTYPE html>
<html>
<head>
  <title>jQuery event.pageX 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $('#container5').on('click', '.target', function(event){
        var pageX = event.pageX;
        var targetId = $(this).attr('id');
        $('#result5').text(targetId + '의 위치: ' + pageX);
      });
    });
  </script>
</head>
<body>

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

</body>
</html>

결과:

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

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

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

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

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

jQuery로 이벤트의 기본 동작 막기  (0) 2024.04.02
jQuery로 마우스 이벤트의 수직 위치 파악하기  (0) 2024.04.02
jQuery event.namespace 속성을 활용한 이벤트 네임스페이스 관리  (0) 2024.04.02
jQuery event.metaKey 속성을 활용한 메타키 확인  (0) 2024.04.02
jQuery event.isPropagationStopped() 메소드를 활용한 이벤트 전파 중단 확인  (0) 2024.04.02
'프로그래밍' Related Articles more