SeouliteLab

jQuery .mousedown() 메서드 이해하기: 마우스 클릭 이벤트 처리 본문

프로그래밍

jQuery .mousedown() 메서드 이해하기: 마우스 클릭 이벤트 처리

Seoulite Lab 2024. 4. 3. 13:12

예제 1: 마우스 클릭 감지하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .mousedown() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $(document).mousedown(function(event){
        console.log("마우스 버튼이 눌렸습니다.");
      });
    });
  </script>
</head>
<body>
  <!-- 내용 생략 -->
</body>
</html>

설명: 이 예제에서는 문서 전체에 대해 마우스 클릭 이벤트를 감지하고, 클릭이 발생하면 콘솔에 메시지를 출력합니다.

예제 2: 특정 요소의 마우스 클릭 감지하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .mousedown() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#button").mousedown(function(event){
        alert("버튼이 클릭되었습니다.");
      });
    });
  </script>
</head>
<body>
  <button id="button">클릭하세요</button>
</body>
</html>

설명: 이 예제에서는 특정 버튼에 대해 마우스 클릭 이벤트를 감지하고, 클릭이 발생하면 경고창을 표시합니다.

예제 3: 마우스 오른쪽 클릭 감지하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .mousedown() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $(document).mousedown(function(event){
        if(event.which == 3){
          alert("마우스 오른쪽 버튼이 클릭되었습니다.");
        }
      });
    });
  </script>
</head>
<body>
  <!-- 내용 생략 -->
</body>
</html>

설명: 이 예제에서는 문서 전체에 대해 마우스 오른쪽 버튼 클릭 이벤트를 감지하고, 클릭이 발생하면 경고창을 표시합니다.

예제 4: 마우스 좌표 출력하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .mousedown() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $(document).mousedown(function(event){
        console.log("마우스 좌표 - X: " + event.pageX + ", Y: " + event.pageY);
      });
    });
  </script>
</head>
<body>
  <!-- 내용 생략 -->
</body>
</html>

설명: 이 예제에서는 마우스 클릭 시 마우스의 X 및 Y 좌표를 콘솔에 출력합니다.

예제 5: 마우스 드래그 감지하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .mousedown() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    #dragbox {
      width: 100px;
      height: 100px;
      background-color: #ccc;
      position: absolute;
    }
  </style>
  <script>
    $(document).ready(function(){
      var isDragging = false;
      $("#dragbox").mousedown(function(event){
        isDragging = true;
        $(document).mousemove(function(event){
          if(isDragging){
            $("#dragbox").css({
              left: event.pageX - 50,
              top: event.pageY - 50
            });
          }
        });
      });
      $(document).mouseup(function(){
        isDragging = false;
      });
    });
  </script>
</head>
<body>
  <div id="dragbox"></div>
</body>
</html>

설명: 이 예제에서는 드래그 박스를 만들고, 마우스를 누르고 있는 동안 드래그하여 박스를 이동시킵니다.

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

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

jQuery .mouseleave() 메서드 이해하기: 마우스가 요소를 벗어날 때 발생하는 이벤트  (0) 2024.04.04
jQuery .mouseenter() 메서드: 요소에 마우스가 진입할 때 발생하는 이벤트  (0) 2024.04.03
jQuery .load() 메서드: 외부 콘텐츠 동적으로 불러오기  (0) 2024.04.03
jQuery .live() 메서드: 이벤트 위임을 통한 동적 요소 처리  (0) 2024.04.03
jQuery .keyup() 메서드 이해하기: 키보드 입력 종료 이벤트 처리하기  (0) 2024.04.03
'프로그래밍' Related Articles more