右クリックメニューのカスタマイズ

カスタマイズされた右クリック メニュー

一部の ERP システムでは、多くの機能操作があるため、通常、ユーザーの利便性を考慮して、よく使用されるいくつかの機能がカスタマイズされた右クリック メニューに組み込まれています。

カスタム メニューの実装は非常に簡単です。まず、元の右クリック メニューをブロックして、カスタム メニューを非表示にします。

*{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.元の右クリックメニューをシールドする

これを実現するためにJSで提供されているイベントがあり、これはイベントバインドされた領域です。右クリックすると、元の右クリックメニューが表示されます。表示されなくなりました:

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

2. カスタム メニューのサイズを取得します

カスタム メニューは最初は非表示になっており、非表示の要素の幅と高さを取得する方法がありません。まずメニュー要素を可視性: 非表示に設定し、要素の幅と高さを取得してから、この属性を削除します:

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. カスタム メニューが現在のマウス位置に表示されます

まず、現在のマウスの位置を取得する必要があります。マウスの位置 、現在のマウスの位置はカスタム メニューが表示される場所です。同時に、右からの距離や下からの距離がメニューを表示するのに十分でない状況にも注意してください:

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";
    }
}

ブラウザウィンドウの幅からカーソルがクリックされたときの左からの距離を引いたときはメニューの幅より小さいので、カーソルから右への距離を意味します。これではメニューを表示するだけでは不十分なので、このときメニューの左の値は右に固定されます。ブラウザウィンドウの幅からメニューの幅を引いた値。ブラウザウィンドウの高さからカーソルから上辺までの距離を引いた値がメニューの高さより小さい場合、このときカーソルから下辺までの距離がメニューを表示するには十分ではないことを意味します。メニューの上部の値は、カーソルから上部までの距離からメニューの高さの距離を引いたものです。

4. メニュー要素をクリックしても、他の要素をクリックしても、メニューを非表示にします

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

使いやすくするために、上記のプロセスをメソッドにカプセル化するか、ネイティブ JS 要素 (IE7 と以下はエラーを報告します)、または JQ のプロトタイプでは、メソッドをカプセル化します。

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;
      }
  }

すべてのイベントはドキュメントにバインドされており、通常、特定の要素にバブリングのキャンセルを設定すると、いくつかの問題が発生するため、対象を絞った対処を行う必要があります。