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

This article is about how native js customizes right-click menus. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

The details are as follows

1. The basic process of right-click menu triggering

To implement a custom right-click menu, we first need to know the following:

The basic process triggered by the browser's default right-click menu

1) right-click, and the menu appears

2) the menu appears, and the mouse arrow is always in the upper left corner of the menu

3) right-click in another location, the original menu disappears and the new menu appears in the specified location

4) Click the left button, middle button and the menu disappears

The above is a rough implementation process, not comprehensive, for reference only

Maybe the text is too abstract, let's take a look at the code:

2. HTML structure

Return (B) Alt+ to the left arrow forward (F) Alt+ to the right arrow to reload (R) Ctrl+R Save as (A). Ctrl+S print (P).. Ctrl+P projection (C). Ctrl+R check your hammer code (V) Ctrl+U check your melon peel (N) Ctrl+Shift+L

3. CSS style

* {margin: 0; padding: 0;} li {list-style: none;} .rightmenu {width: 250px; background: # fff; border: 1px solid # bababa; position: fixed; box-sizing: border-box; display: none;}. Rightmenu ul {border-bottom: 1px solid # e9e9e9;}. Rightmenu ul li {height: 30px; line-height: 30px; color: # 000; padding: 025px; box-sizing: border-box; margin: 2px 0; cursor: default;}. Rightmenu ul li:hover {background: # ebebeb }. Rightmenu ul li a {font-size: 12px; color: # 000; cursor: default; text-decoration: none;}. Rightmenu ul li span {float: right; font-size: 12px; color: # 000;} .box {width: 100px; height: 100px; background: red;}

Rightmenu sets display:none because the right menu itself is hidden because it appears because you clicked. If you don't add this sentence, the menu will appear in the upper left corner of the page.

3. Js implementation process

Analysis:

①: the browser itself has a right-click menu, and we also need to make the right-click menu, so we should prevent the right-click of the browser. Here you can use preventDefault (). This method has the function of blocking the default event. Popular science, what is the default event:

For example: click I can know that this can be transferred to Baidu, so there is a jump time, this event we did not use js to achieve, it is the default, so it is called the default event, similarly, the browser right menu.

Before ②, we said that the menu appears, and the mouse arrow is always in the upper left corner of the menu. how is this realized? it involves the event occurrence coordinates in event. The location where we click is the location where we right click on the event, which can be explained by coordinates, clientX (location of event occurrence point and visual area), offsetX (location of event occurrence point and parent element) PageX (event location and page location), screenX (event location and screen location), here we use offsetX/Y, because we click in BOW, so the specific reason is straight from Baidu, let's look at the code, the code is marked in detail.

Document.addEventListener ('DOMContentLoaded',function () {/ / get var rightMenu=document.getElementById (' rightmenu'); / / 1. First, turn off the right-click default behavior of _ window.oncontextmenu=function (event) {event.preventDefault (); / / 2. Set the right-click behavior rightMenu.style.display= "none"; / / reset the block menu rightMenu.style.display= "block"; rightMenu.style.left=event.offsetX+'px'; rightMenu.style.top=event.offsetY+'px';} / / 3. According to the right button of the real browser, the left button can cancel the right-click menu of _ document.onclick=function (event) {rightMenu.style.display= "none";} / / 4. The function is not perfect. We need to write BOM events for each li. We will not write / / 5 here for the time being. If you check carefully, you will find that when you right-click on the right-click menu defined by yourself, there will be a small situation. You can test it yourself.) Thank you for reading! This is the end of this article on "how to customize the right-click menu for native js". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

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.