Javascript는 마우스 오른쪽 버튼 클릭 특수 menu_javascript 기술을 구현합니다.

웹에서는 일반적으로 마우스 오른쪽 버튼 클릭 메뉴가 필요하지 않으며 각 브라우저에도 자체 오른쪽 클릭 메뉴가 있습니다. 그러나 Baidu Music 및 QQ Mailbox와 같은 일부 특수 웹 페이지의 경우 사용자 경험을 높이기 위해 오른쪽 클릭 메뉴가 필요합니다. 이제 웹에서 모두 오른쪽 클릭 메뉴를 사용했을 것입니다. 비교적 간단합니다.

코드 실행:

window.onload = function() {
      document.oncontextmenu = block;
      document.body.onmouseup = function(event) {
        if (!event) event = window.event;
        if (event.button == 2) {
          var x = event.pageX || event.clientX;
          var y = event.pageY || event.clientY;
          document.getElementById("contextMenu").style.left = x  "px";
          document.getElementById("contextMenu").style.top = y  "px";
          document.getElementById("contextMenu").style.display = "block";
        }
      }
      //阻止事件冒泡
      document.getElementById("contextMenu").onclick = function(event) {
        event.stopPropagation();
      }
      //点击其他地方隐藏
      document.onclick = function() {
        document.getElementById("contextMenu").style.display = "none";
      }
      for (var i = 0; i < getElementsByClassName("contextMenuItem").length; i ) {
 
        getElementsByClassName("contextMenuItem")[i].onclick = function(event) {
          event = event &#63; event : window.event
          var target = event.srcElement &#63; event.srcElement : event.targe;
          document.getElementById("contextMenu").style.display = "none";
          //alert("您点击了： "  target.innerHTML);
           
        }
      }
 
    }
     
    function block(event) {
      if (window.event) {
        event = window.event;
        event.returnValue = false;
      } else event.preventDefault();
    }
    //兼容IE不支持getElementsByClassName
    function getElementsByClassName(className, root, tagName) {
      if (root) {
        root = typeof root == "string" &#63; document.getElementById(root) : root;
      } else {
        root = document.body;
      }
      tagName = tagName || "*";
      if (document.getElementsByClassName) { 
        return root.getElementsByClassName(className);
      } else {
        var tag = root.getElementsByTagName(tagName); 
        var tagAll = [];
        for (var i = 0; i < tag.length; i ) {
          for (var j = 0, n = tag[i].className.split(' '); j < n.length; j ) {
            if (n[j] == className) {
              tagAll.push(tag[i]);
              break;
            }
          }
        }
        return tagAll;
      }
    }

렌더링:

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.