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

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

WBOY

リリース： 2016-05-16 17:34:04

オリジナル

1225 人が閲覧しました

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