JavaScript의 사용자 정의 오른쪽 클릭 상황에 맞는 메뉴

이것은 사용자 정의 오른쪽 클릭을 만드는 방법을 보여준 JavaScript 자습서입니다. 기본 JavaScript를 알고 있다면 이 사용자 지정 오른쪽 클릭 상황에 맞는 메뉴를 만들 수 있습니다.

마우스 왼쪽 클릭을 더 많이 사용합니다. 그러나 대부분의 대형 웹 사이트 또는 응용 프로그램에서 마우스 오른쪽 버튼을 사용하는 경우. 이러한 유형의 사용자 지정 오른쪽 클릭 메뉴는 Windows 및 기타 모든 운영 체제에서도 사용됩니다. Watch its live demo 작동 방식을 알아보십시오.

여기에서는 간단한 JavaScript 오른쪽 클릭 컨텍스트 메뉴를 만들 것입니다. 그리고 제가 만든 방법에 대한 완전한 정보를 공유하겠습니다.

JavaScript 사용자 정의 오른쪽 클릭 메뉴

이 유형의 사용자 정의 상황에 맞는 메뉴는 웹 페이지의 아무 곳이나 마우스 오른쪽 버튼으로 클릭할 때 나타납니다. 사용자 정의 메뉴 표시줄을 숨기려면 다시 마우스 왼쪽 버튼을 클릭합니다.

보시다시피 마우스 오른쪽 버튼을 클릭하면 작은 상자가 나타납니다. 그 상자에는 몇 가지 메뉴 항목이 있습니다. 이 메뉴 대신 다른 것을 사용할 수 있지만.

아래에는 모든 코드와 코드 생성 방법이 나와 있습니다.

HTML 코드

먼저 몇 줄의 간단한 html을 사용하여 메뉴 항목을 추가했습니다. 사용된 5가지 메뉴입니다. 이 메뉴의 양을 늘릴 수 있습니다.

<div id="context-menu">
  <div class="item">View</div>
  <div class="item">Refresh</div>
  <div class="item">Copy</div>
  <div class="item">Customize</div>
  <div class="item">Save As</div>
</div>

CSS 코드

이제 css로 메뉴 항목과 오른쪽 클릭 컨텍스트 메뉴를 디자인했습니다.

먼저 일부 코드를 사용하여 웹 페이지를 디자인했습니다.

그러면 컨텍스트 메뉴의 기본 디자인이 완료되었습니다.

여기에서 메뉴 표시줄'visibility: hidden'이 완료되었습니다. 이는 정상적인 조건에서는 메뉴 표시줄을 볼 수 없음을 의미합니다.

마지막에 메뉴 항목을 디자인하고 hover effect를 추가했습니다.

* {
 padding: 0;
 margin: 0;
 box-sizing: border-box;
 font-family: "Poppins", sans-serif;
}

body {
 background-color: #dfe8f1;
}

#context-menu {
 background-color: #ffffff;
 box-shadow: 0 0 20px rgba(37, 40, 42, 0.22);
 color: #1f194c;
 width: 10em;
 padding: 0.8em 0.6em;
 font-size: 1.3rem;
 position: fixed;
 visibility: hidden;
}

.item {
 padding: 0.3em 1.2em;
}

.item:hover {
 background-color: rgba(44, 141, 247, 0.2);
 cursor: pointer;
}

자바스크립트

이제 JavaScript를 사용하여 오른쪽 클릭 컨텍스트 메뉴를 활성화할 차례입니다. 이 경우 JavaScript의 모든 줄에는 필요한 설명이 있습니다.

초보자라도 이해하는데 어려움이 없을 것입니다.

    //Events for desktop and touch
    let events = ["contextmenu", "touchstart"];

    //initial declaration
    var timeout;

    //for double tap
    var lastTap = 0;

    //refer menu div
    let contextMenu = document.getElementById("context-menu");

    //same function for both events
//event type is a data structure that defines the data contained in an event
    events.forEach((eventType) => {
      document.addEventListener(
        eventType,
        (e) => {
//preventDefault() method stops the default action of a selected element from happening by a user
          e.preventDefault();
          //x and y position of mouse or touch
//mouseX represents the x-coordinate of the mouse
          let mouseX = e.clientX || e.touches[0].clientX;
//mouseY represents the y-coordinate of the mouse.
          let mouseY = e.clientY || e.touches[0].clientY;
          //height and width of menu
//getBoundingClientRect() method returns the size of an element and its position relative to the viewport
          let menuHeight = contextMenu.getBoundingClientRect().height;
          let menuWidth = contextMenu.getBoundingClientRect().width;
          //width and height of screen
//innerWidth returns the interior width of the window in pixels
          let width = window.innerWidth;
          let height = window.innerHeight;
          //If user clicks/touches near right corner
          if (width - mouseX <= 200) {
            contextMenu.style.borderRadius = "5px 0 5px 5px";
            contextMenu.style.left = width - menuWidth + "px";
            contextMenu.style.top = mouseY + "px";
            //right bottom
            if (height - mouseY <= 200) {
              contextMenu.style.top = mouseY - menuHeight + "px";
              contextMenu.style.borderRadius = "5px 5px 0 5px";
            }
          }
          //left
          else {
            contextMenu.style.borderRadius = "0 5px 5px 5px";
            contextMenu.style.left = mouseX + "px";
            contextMenu.style.top = mouseY + "px";
            //left bottom
            if (height - mouseY <= 200) {
              contextMenu.style.top = mouseY - menuHeight + "px";
              contextMenu.style.borderRadius = "5px 5px 5px 0";
            }
          }
          //display the menu
          contextMenu.style.visibility = "visible";
        },
        { passive: false }
      );
    });

    //for double tap(works on touch devices)
    document.addEventListener("touchend", function (e) {
      //current time
      var currentTime = new Date().getTime();
      //gap between two gaps
      var tapLength = currentTime - lastTap;
      //clear previous timeouts(if any)
//The clearTimeout() method clears a timer set with the setTimeout() method.
      clearTimeout(timeout);
      //if user taps twice in 500ms
      if (tapLength < 500 && tapLength > 0) {
        //hide menu
        contextMenu.style.visibility = "hidden";
        e.preventDefault();
      } else {
        //timeout if user doesn't tap after 500ms
        timeout = setTimeout(function () {
          clearTimeout(timeout);
        }, 500);
      }
      //lastTap set to current time
      lastTap = currentTime;
    });

    //click outside the menu to close it (for click devices)
    document.addEventListener("click", function (e) {
      if (!contextMenu.contains(e.target)) {
        contextMenu.style.visibility = "hidden";
      }
    });

원하는 경우 위의 비디오를 시청하여 이 사용자 정의 오른쪽 클릭(컨텍스트 메뉴)이 어떻게 작동하는지 더 잘 알 수 있습니다.

여기서는 최대한 설명하려고 노력했습니다. 그래도 문제가 있으면 댓글로 알려주세요.

이 JavaScript Custom Right Click Context Menu가 마음에 드시면 댓글을 달아주세요.