jQuery,JSカスタムマウス右クリックメニューを実現

マウスクリックイベントは基本的に各ページに不可欠であり、ほとんどの場合、click()メソッドで実現できる通常のマウス左クリックである.
しかし、多くの場合、マウスの右クリックでいくつかの機能の実現を実現したいと思っています.例えば、1つのテーブルデータ、テーブルの各行のデータは削除、修正、送信などの操作を行うことができます.各行にこれらの操作ボタンを追加すると、これは面倒で、多くの空間を占めています.各行のデータをマウスで右クリックし、選択モジュールをポップアップします.このようにページ全体が簡潔に見え、操作も便利になりました.次に、この機能を実現します.
ほとんどのブラウザには、自分のデフォルトのマウスの右クリックイベントがあり、Webページをリフレッシュするのはマウスの右クリックを通じて、選択ボックスをポップアップし、私たちが行う操作を選択することです.
まず最初のステップでは、既存のデフォルトイベントを削除します.
JSマスクによる右クリックメニュー付き

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

マウスを押すとmousedownイベントが発生し、e.whichの値を判断することでマウスのキーを押すことができます.

$('#aa').mousedown(function(e){
    if(e.which == 3){  // 1 =      left; 2 =     ; 3 =     
        alert("        ");
    }
})

これにより、ブラウザのデフォルトのマウスの右クリックメニューを変更し、マウスの位置に自分のメニューを表示します.
まずhtmlでメニューモジュールを定義します.positionは必ず絶対的な位置に設定し、bodyの次のレベルに置いたほうがいいです.具体的なスタイルの設定はここでは詳しく説明しません.

次のステップはもちろん、マウスの右クリック時にマウスの位置を取得し、マウスの位置にメニューを表示すればよいが、マウスの左クリック時に右クリックメニューを非表示にする.

$('table').mousedown(function(e){
    if(e.which == 3){  // 1 =     ; 2 =     ; 3 =     
        var x = e.originalEvent.x || e.originalEvent.layerX || 0;
        var y = e.originalEvent.y || e.originalEvent.layerY || 0;
        $("#menu").css({
            left: x + "px";
            top: y + "px";
        });
        $("#menu").show();
    }
    if(e.which == 1){  //        ，       
        $("#menu").hide();
    }
})

これにより、マウスの右クリックメニューの書き換えが実現します.
Layuiを使用してテーブルの各行のデータと対応するフィールドを動的に取得し、各行のデータを操作することに興味がある方は、その後、対応するブログを更新します.
次のブログ予告:Layuiを使用して、表の各行のデータとその対応するフィールドを動的に取得し、カスタマイズしたマウスの右クリックメニューで操作します.
私に注目してほしい.フロントエンドに関するよくある問題を共有し続けます.皆さんの私のブログの閲覧、関心は私に最大の支持を与えて、私に動力を与えます.’