How to customize the right-click menu for any element in JavaScript

I. concepts:

1. The mouse event has a botton attribute: return an integer to indicate which mouse button is clicked.
BUG: in IE and standard DOM mouse events, the only event with the same button property value is the "right-click" event, both return 2.

2. Event onmousedown: indicates the action of pressing the mouse button.
Event oncontextmenu: Another event triggered by clicking the mouse.

3. Method for interrupting the default event processing function: Set returnValue = false in IE; call the preventDefault () method in standard DOM.

4. event object: ① in IE, the event object is an event attribute of the window object.

Statement:

 

② In the standard DOM, the event object is the unique parameter of the event processing function.

Statement:

 

Solve compatibility:

 

II. Implementation:

HTML:
Copy codeThe Code is as follows:
<P id = "p1"> Uncle Cat is a fat white cat! </P>
<Div id = "d1">
<A> cut </a>
<A> copy </a>
<A> paste </a>
</Div>

Javascript:
Copy codeThe Code is as follows:
Window. onload = function (){
Rightmenu ('p1', 'd1 ');
}
/****
* Encapsulate the right-click menu function:
* ElementID: id of the element to which you want to customize the right-click menu
* The id of the right-click menu DIv to be displayed by menuID
*/
Function rightmenu (elementID, menuID ){
Var menu = document. getElementById (menuID); // obtain the menu object
Var element = document. getElementById (elementID); // obtain the element with the right-click permission
Element. onmousedown = function (aevent) {// set the processing function for this element by right-clicking
If (window. event) aevent = window. event; // compatibility
If (aevent. button = 2) {// when the event property button value is 2, the table User Right-click
Document. oncontextmenu = function (aevent ){
If (window. event ){
Aevent = window. event;
Aevent. returnValue = false; // right-click the IE interrupt event processing function by default.
} Else {
Aevent. preventDefault (); // right-click the standard DOM interrupt and choose event handler by default.
};
};
Menu.style.css Text = 'display: block; top: '+ aevent. clientY + 'px;' + 'left: '+ aevent. clientX + 'px ;'
// Move the menu relative to the mouse
}
}
Menu. onmouseout = function () {// hide the menu when you move the mouse out of the menu
SetTimeout (function () {menu. style. display = "none" ;}, 400 );
}
}