JS右クリックメニュー実現

今日は右クリックメニューの小さなdemoについて、レンガを投げて玉を引きます.
まず、cssとhtmlでカスタム右クリックメニューを作ります.

    
  1
    
  2
    
  3
    
  4
    
  5

/*css  */
#menu{
    width: 0;       /*   0        */
    height: 125px;
    overflow: hidden;      /*       */
    box-shadow: 0 1px 1px #888,1px 0 1px #ccc;
    position: absolute;      /*        body      */
}
.menu{
    width: 130px;
    height: 25px;
    line-height: 25px;
    padding: 0 10px;
}

カスタムメニューが用意されており、重要なイベントcontextmenuも必要です.
contextmenu:ページを右クリックすると、このイベントがトリガーされ、ブラウザに付属の右クリックメニューから飛び出します.
したがって、contextmenuイベントをトリガーするときに、デフォルトの動作(つまり、ブラウザに付属のメニューが表示されないようにする)をキャンセルし、入力されたイベントオブジェクトを介してマウスのクリック位置を決定し、leftとtopの値として要素の位置決めを行い、カスタムメニューを表示することです.

window.oncontextmenu=function(e){
    //                ！！
    e.preventDefault();

    //            
    var menu=document.querySelector("#menu");

    //              ，    
    menu.style.left=e.clientX+'px';
    menu.style.top=e.clientY+'px';

    //          ，      
    menu.style.height='125px';
}
//      ，   
window.onclick=function(e){

  //    click        ，     window ，       ，         
　　　　document.querySelector('#menu').style.height=0;
}

ここでは簡単な例にすぎません.contextmenuイベントはすべてのHTML要素をサポートします.これは、異なる要素に異なる右クリックメニューをカスタマイズすることができます.contextmenuイベントはバブル伝播し、サブノードでトリガーされたイベントは、親ノードでもトリガーされるので、対応する関数を呼び出したり、対応する属性値を設定してイベントのバブルを阻止する必要があります.イベントオブジェクトに基づいて位置決めするのは複雑で簡単で、clientYとclientXのほか、マウスのイベントオブジェクトはlayerX、pageXなどの複雑な関連情報を提供しています.これらの値は直感的ではなく、ブラウザの互換性の問題もありますが、clientXとclientYは万金油属性と言えます.