SeouliteLab

jQuery .mouseup() 메서드: 마우스 버튼을 놓을 때 발생하는 이벤트 본문

프로그래밍

jQuery .mouseup() 메서드: 마우스 버튼을 놓을 때 발생하는 이벤트

Seoulite Lab 2024. 4. 4. 09:02

예제 1: 버튼을 누른 후 마우스 버튼을 놓을 때 메시지 출력하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .mouseup() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("button").mouseup(function(){
        $("#message").text("마우스 버튼을 놓았습니다.");
      });
    });
  </script>
</head>
<body>
  <button>클릭하세요</button>
  <div id="message"></div>
</body>
</html>

설명: 이 예제에서는 버튼을 클릭한 후 마우스 버튼을 놓으면 메시지가 출력됩니다.

예제 2: 드래그 앤 드롭 구현하기

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

설명: 이 예제에서는 드래그 앤 드롭을 구현하며, 마우스 버튼을 놓을 때 드래그 상태를 해제합니다.

예제 3: 클릭한 위치에 박스 생성하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .mouseup() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    .box { width: 50px; height: 50px; background-color: red; position: absolute; }
  </style>
  <script>
    $(document).ready(function(){
      $(document).mouseup(function(event){
        var x = event.pageX;
        var y = event.pageY;
        $("<div class='box'></div>").css({ left: x, top: y }).appendTo("body");
      });
    });
  </script>
</head>
<body>
</body>
</html>

설명: 이 예제에서는 마우스를 클릭한 위치에 박스를 생성합니다.

예제 4: 이미지 슬라이드쇼 멈추기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .mouseup() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    var intervalId;

    function startSlideshow() {
      intervalId = setInterval(nextSlide, 3000);
    }

    function nextSlide() {
      // 슬라이드쇼 로직
    }

    function stopSlideshow() {
      clearInterval(intervalId);
    }
  </script>
</head>
<body>
  <button onclick="startSlideshow()">슬라이드쇼 시작</button>
  <button onclick="stopSlideshow()">슬라이드쇼 멈춤</button>
</body>
</html>

설명: 이 예제에서는 슬라이드쇼를 시작하거나 멈추기 위해 마우스 버튼을 놓는 이벤트를 사용합니다.

예제 5: 드래그를 이용한 요소 이동

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .mouseup() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    .draggable { width: 100px; height: 100px; background-color: #ccc; position: absolute; }
  </style>
  <script>
    $(document).ready(function(){
      var isDragging = false;
      var $draggable = $(".draggable");
      var offset = $draggable.offset();
      var relX, relY;

      $draggable.mousedown(function(e){
        isDragging = true;
        relX = e.pageX - offset.left;
        relY = e.pageY - offset.top;
      });

      $(document).mousemove(function(e){
        if (isDragging) {
          var mouseX = e.pageX - relX;
          var mouseY = e.pageY - relY;
          $draggable.css({ left: mouseX, top: mouseY });
        }
      });

      $(document).mouseup(function(){
        isDragging = false;
      });
    });
  </script>
</head>
<body>
  <div class="draggable"></div>
</body>
</html>

설명: 이 예제에서는 드래그를 이용하여 요소를 마우스로 이동시킵니다.

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

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

jQuery .on() 메서드: 이벤트 핸들러 등록을 위한 메서드  (0) 2024.04.04
jQuery .off() 메서드: 이벤트 해제를 위한 메서드  (0) 2024.04.04
jQuery .mouseover() 메서드: 요소에 마우스를 올렸을 때 발생하는 이벤트  (0) 2024.04.04
jQuery .mouseout() 메서드 이해하기: 요소를 벗어날 때 발생하는 이벤트  (0) 2024.04.04
jQuery .mouseleave() 메서드 이해하기: 마우스가 요소를 벗어날 때 발생하는 이벤트  (0) 2024.04.04
'프로그래밍' Related Articles more