JS How to implement a custom mouse to click menu

This article shared everyone about how JS implements custom mouse to right click on the menu. Xiaobian feels quite practical, so share it with you to do a reference. Let’s take a look at Xiaobian.

Custom mouse to right – click menu feature:

Prohibition page default right-click event

Set the style of right-click on the menu and the location of the menu (click position by capturing mouse click) Determine the location of the menu)

Displays the menu when the specified control (area) is hit (the default menu is hidden, click the right mouse button)



           Right-click Display Menu   
menu 1 HTML js code The positioning of the menu is mainly in the first IF statement section, and later is the verification button effect.
Menu1.Style.top is used to locate the menu, by the CSS style sheet, I know the Position attribute of Menu1, and Style.top Location is relative to its nearest position property value. Not for the STATIC’s father, here is Body.

MENU’s location requires determination based on the specific situation of the page layout is E.OffsetX / Y, E.ClientX / Y or others, add Document.DocumentElement.ScrollTop is considering the case of the scroll bar ( In fact, there is no scroll bar in this example).

Window.onLoad = function () {// The following is a custom right-click menu document.onContextMenu = function (e) {// block the execution browser default right-click event E. PreventDefault (); // chat room list IF (“Menu-friend”)) {var menu1 = document.getlementByid (“menu-friend”); menu1.style.display = “block”; document; getElementByid (“contain-friend”). OnMouseDown = function (e) {// menu positioning menu1.style.Left = E.OffSetx + “PX”; menu1.style.top = document.documentelement.scrolltop + E.Clienty + “px”; //alert (Menu1.style.top) if (Document.GetElementByid (“Contain-fr)IEND “)) {if (e.button == 2) {menu1.style.visibility =” visible “;} else {menu1.style.visibility =” hidden “;}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}} BTN1 “)) {document.getElementByid (” btn1 “). OnMousedown = function (e) {document.getlementByid (” label1 “). Innerhtml =” You click on the menu “}}}}}}}}}}}}}}} (” btn2 ” )) {document.getlementByid (“btn2”). OnMousedown = function (e) {document.getlementByid (“label1”). Innerhtml = “You click on the menu 2”}} Return False; // and E.PreventDefault () The function is the same, but must be placed in the end, otherwise no execution}

JavaScript file

CSS style table
 1 / *customizeRight to click on the menu * /   
.Contain {background-color: # d1cebc; height: 100px; width: 300px;}. Menu {width: 150px; background-color: white; Visibility: Hidden; Position: Absolute; Box-Shadow: 0px 0px 10px # d1cebc}. Menu-item {background-color: #fff; margin: 0;}. menu-item-btn {width: 146px; margin: 2px; Border: 0; Text-Align: Left; Padding-Top: 5px; Padding-Bottom: 5px; Background-Color: #fff; Color: # 000;}. menu-item-btn: hover { Background-color: # D1cebc;}

Thank you for reading! About JS How to implement a custom mouse right click on the menu and share it here, I hope that the above can help everyone, let everyone learn more. If you feel that the article is good, you can share it out to let more people see it!

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment