任意の要素の右クリックメニューをカスタマイズするためのJavaScript実装方法_基礎知識

1. いくつかの概念:

1. マウス イベントにはbottom属性があります。どのマウス ボタンがクリックされたかを示す整数を返します。
バグ: IE と標準 DOM のマウス イベントの中で、同じ値を持つ唯一のボタン属性値は「右クリック」イベントであり、どちらも 2 を返します。

2. イベント onmousedown: マウス ボタンを押すアクションを示します。
Event oncontextmenu: マウスのクリックによってトリガーされる別のイベント。

3. デフォルトのイベント処理関数を中断するメソッド: IE で returnValue=false を設定し、標準 DOM でPreventDefault() メソッドを呼び出します。

4. イベントオブジェクト: ① IE では、イベントオブジェクトはウィンドウオブジェクトのイベント属性です。

免責事項:

②標準 DOM では、イベントオブジェクトはイベント処理関数の唯一のパラメータです。

免責事項:

互換性の解決:

2. 実装:

< ;p id="p1">猫おじさんは太った白猫です !

カット

コードをコピーします コードは次のとおりです:

window.onload=function(){

rightmenu(' p1',' d1');
}
/****
* 右クリック メニュー関数をカプセル化します:
* elementID 右クリック メニューをカスタマイズする要素の ID
* menuID 表示される右クリック メニュー DIv の ID
*/
function rightmenu(elementID,menuID){

var menu=document.getElementById(menuID); //Get the menu object
var element=document.getElementById(elementID);//カスタム右ボタンでクリックされた要素を取得
element.onmousedown=function(aevent){ //右マウス押下の処理関数を設定要素のボタン

if(window.event)aevent=window.event; //互換性を解決しますif(aevent.button==2){ //イベント属性ボタンの値が 2 の場合、ユーザーが右ボタンを押しましたDocument.oncontextmenu=function(aevent){ if(window.event){ aevent=window.event; aevent.returnValue=false; //デフォルトは右- IE 中断のクリック イベント ハンドラー top:' aevent.clientY 'px;' left:' aevent.clientX 'px;'

//マウスを基準にしてメニューを配置します

}
}
menu.onmouseout=function(){ //マウスがメニューの外に出たときにメニューを非表示にするように設定します
setTimeout(function(){menu.style.display="none";},400) ;
}
}