Passen Sie das Rechtsklick-Menü an

Rechtsklick-Menü anpassen

Rechtsklick-Menü anpassen Für einige ERP-Systeme gibt es viele funktionale Vorgänge, daher fügen wir normalerweise mehrere häufig verwendete Funktionen in das angepasste Rechtsklick-Menü ein Bequemlichkeit der Benutzer.

Das Implementieren eines benutzerdefinierten Menüs ist sehr einfach. Zuerst müssen wir das benutzerdefinierte Menü an der Mausposition blockieren. Dies ist der Vorgang.

*{margin:0;padding:0}
a{text-decoration:none}
ul li{list-style:none}
.menu{border:1px solid black;border-radius:5px;display:inline-block;position:fixed;top:100px;left:550px;
overflow:hidden;padding-bottom:10px;box-shadow:0 0 10px 0;z-index:999;display:none;background:white}
.menu ul li{height:30px;width:100%}
.menu ul li a{height:30px;display:inline-block;width:100%;text-align:left;line-height:30px;padding:5px 10px}
.menu li a:hover{background-color:#EEF5E2}

<div class="menu" id="demo">
    <ul>
        <li><a href="#">向录入员发送消息</a></li>
        <li><a href="#">发送选中作业</a></li>
        <li><a href="#">设置作业状态</a></li>
        <li><a href="#">哈哈哈哈哈</a></li>
        <li><a href="#">嘻嘻嘻嘻嘻</a></li>
        <li><a href="#">呵呵呵呵呵呵</a></li>
    </ul>
  </div>

1. Schirmen Sie das ursprüngliche Rechtsklick-Menü ab

Um dies zu erreichen, wird in JS ein Ereignis bereitgestellt, nämlich oncontextmenu. Dies ist der ereignisgebundene Bereich, wenn Sie Rechtsklick Das ursprüngliche Rechtsklick-Menü wird nicht mehr angezeigt:

document.oncontextmenu = function(){  return false;
}

2. Ermitteln Sie die Größe des benutzerdefinierten Menüs

Das benutzerdefinierte Menü ist zunächst ausgeblendet und wir haben keine Möglichkeit um versteckte Elemente auszublenden. Ermitteln Sie deren Breite und Höhe. Wir können zunächst das Menüelement auf „visibility:hidden“ setzen, die Breite und Höhe des Elements ermitteln und dann dieses Attribut entfernen:

function getHideDOMWH(obj){
      //obj为菜单元素的DOM对象
      var wh = {};
      obj.style.visibility = "hidden";
      wh.w = obj.scrollWidth;
      wh.h = obj.scrollHeight;
      obj.style.visibility = null;
      return wh;
  }

3. Das benutzerdefinierte Menü erscheint an der aktuellen Mausposition

Zuerst müssen wir die aktuelle Mausposition ermitteln. An der aktuellen Mausposition erscheint das benutzerdefinierte Menü. Achten Sie gleichzeitig auf den Fall, dass der Abstand von rechts oder der Abstand von unten nicht ausreicht, um das Menü anzuzeigen:

document.onmousedown = function(e){
    //obj为菜单元素DOM对象
    var e = e || window.event;
    if(e.button==2){
        var left = e.clientX;
        var top = e.clientY;
        var windowHeight = document.body.scrollHeight;
        var windowWidth = document.body.scrollWidth;
        var wh = getHideDOMWH(obj);
        var contentHeight = wh.h;
        var contentWidth = wh.w;
        obj.style.left = windowWidth-left>contentWidth?left+"px":windowWidth-contentWidth+"px";
        obj.style.top = windowHeight-top>contentHeight?top+"px":top-contentHeight+"px";
        obj.style.display = "inline-block";
    }
}

Wenn die Breite des Browserfensters minus der Abstand von der Wenn der Cursor nach links geklickt wird, ist er kleiner als die Breite des Menüs. Dies bedeutet, dass der Abstand zwischen dem Cursor und der rechten Seite nicht mehr ausreicht, um das Menü anzuzeigen Der linke Wert des Menüs ist die Breite des Browserfensters minus der Breite des Menüs. Wenn die Höhe des Browserfensters abzüglich des Abstands vom Cursor zur oberen Seite geringer ist als die Höhe des Menüs, bedeutet dies, dass der Abstand vom Cursor zur unteren Seite nicht ausreicht, um das Menü anzuzeigen Der obere Wert des Menüs ist der Abstand vom Cursor zum oberen Rand minus dem Abstand der Menüoberkante.

4. Blenden Sie das Menü aus, unabhängig davon, ob Sie auf das Menüelement oder andere Elemente klicken.

document.onclick = function(){    //obj为菜单元素DOM对象
    obj.style.display = "none";
}

Zur einfacheren Verwendung können wir den obigen Prozess in eine Methode oder im nativen JS kapseln Element Erweitern Sie eine Methode auf dem Prototyp (IE7 und niedriger melden einen Fehler) oder auf dem JQ-Prototyp. Hier kapseln wir eine Methode.

function contextMenu(obj){
      //obj为DOM对象
      document.oncontextmenu = function(){
          return false;
      }
      document.onmousedown = function(e){
          var e = e||window.event;
          if(e.button==2){
              var mouseX = e.clientX;
              var mouseY = e.clientY;
              var wh = getObjWH(obj);
              var contentW = wh.w;
              var contentH = wh.h;
              var documentW = document.body.scrollWidth;
              var documentH = document.body.scrollHeight;
              obj.style.left = documentW-mouseX<contentW?documentW-contentW+"px":mouseX+"px";
              obj.style.top = documentH-mouseY<contentH?mouseY-contentH+"px":mouseY+"px";
              obj.style.display = "inline-block";
          }
          
      }
      document.onclick = function(){
          obj.style.display = "none";
      }
      function getObjWH(obj){
          var wh = {};
          obj.style.visibility = "hidden";
          wh.w = obj.scrollWidth;
          wh.h = obj.scrollHeight;
          obj.style.visibility = null;
          return wh;
      }
  }

Alle unsere Ereignisse sind an das Dokument gebunden und wir verwenden normalerweise den Bubbling-Mechanismus für Ereignisse. Wenn wir das Bubbling für ein Element festlegen, müssen einige gezielte Verarbeitungen durchgeführt werden .