Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article, "JS to achieve custom mouse right-click menu code to write", so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "JS to achieve custom mouse right-click menu code how to write" article.

The code is as follows:

HTML code

Document

Right-click the display menu

Menu one

Menu two

HTML

JS code

The positioning of the menu is mainly in the first if statement section, followed by verifying the button effect.

Menu1.style.left and menu1.style.top are used to locate menus, and it is known from the css stylesheet that the position attribute of menu1 is positioned as absolute,style.top locates a parent element whose value is not static relative to the nearest position attribute, which is body.

The location of the menu depends on the layout of the page to determine whether it is e.offsetX/Y, e.clientX/Y, or something else. Adding document.documentElement.scrollTop here is to consider adding scroll bars (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) {

/ / prevent the browser from executing the default right-click event

E.preventDefault ()

/ / chat room friend list

If (document.getElementById ("menu-friend")) {

Varmenu1=document.getElementById ("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-friend")) {

If (e.button==2) {

Menu1.style.visibility= "visible"

} else {

Menu1.style.visibility= "hidden"

}

}

}

}

}

If (document.getElementById ("btn1")) {

Document.getElementById ("btn1") .onmousedown = function (e) {

Document.getElementById ("label1") [xss_clean] = "you clicked menu one"

}

}

If (document.getElementById ("btn2")) {

Document.getElementById ("btn2") .onmousedown = function (e) {

Document.getElementById ("label1") [xss_clean] = "you clicked menu two"

}

}

Returnfalse

/ / the function is the same as that of e.preventDefault ();, but must be placed at the end, otherwise the content after return will not be executed.

}

JavaScript file

CSS style sheet

1Universe * Custom right-click menu * /

.contain {

Background-color:#D1CEBC

Height:100px

Width:300px

}

.menu {

Width:150px

Background-color:white

Visibility:hidden

Position:absolute

Box-shadow:0px0px10px#D1CEBC

}

. menu-item {

Background-color:#fff

Margin:0

}

.menu-item-btn {

Width:146px

Margin:2px

Border:0

Text-align:left

Padding-left:60px

Padding-top:5px

Padding-bottom:5px

Background-color:#fff

Color:#000

}

.menu-item-btn:hover {

Background-color:#D1CEBC

}

The above is about "JS implementation of custom mouse right-click menu code how to write" this article, I believe we all have a certain understanding, I hope the editor to share the content to help you, if you want to know more related knowledge content, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.