Home > Developer > JavaScript
In a recent discussion in the programmer base camp, a dude proposed how to implement a shortcut menu in the browser after right-clicking an application-like mouse. I tried it and found it was not difficult to solve it. Now let's share the source code and principles with you. Haha, the effect is not perfect. If any hero has a better solution. Can send a letter to the fish yyu@enet.com.cn Luo.
The first problem to be solved is how to right-click and choose not to display the IE menu. There can be two ideas: one is to move the focus away, and the other is that the right-click menu will not appear somewhere on the webpage, and the message will respond to the mouse click. (Haha, a lot of nonsense. Idea? Always think about it)
I thought about the following methods.
1. Right-click the response and select an ALERT box (there is something new ).
2. Right-click the response and a new window will pop up. Remove the focus of the initial Page.
However, after the test, it is found that the right-click menu of the browser does not appear only when the window appears at the right-click position.
3. Right-click the response message and an HTML dialog box is displayed. You can use showModalDialog to open an HTML dialog box. By using this method, the right-click menu will not appear. However, one problem is that the dialog box opened with showModalDialog will not be removed from the screen range from the dialog box opened with Window. Open. That is to say, you can always see a dialog box on the screen. This road cannot go.
4. Haha, the last trick was made. Only fish occasionally found that right-clicking or left-clicking on Select would not respond. If you place the cursor over Select each time, the right-click menu of the browser will not appear.
Next, let's take an example. If you are interested, you can make the following example test.html to see the effect.
<HTML>
<Title> VFish Test </title>
<Script>
Var x, y;
Document. onmousemove = moveMouse
Document. onmousedown = click
Function moveMouse ()
{
Layer1.style. left = event. clientX-2;
Layer1.style. top = event. clientY-2;
}
Function click ()
{
If (event. button = 2)
{
X = event. clientX;
Y = event. clientY;
Layer1.style. visibility = "";
Window. setTimeout ("showMenu ();", 500 );
}
Else
{
HiddenPop ();
PopMenu. style. visibility = 'den den ';
}
}
Function showMenu ()
{
PopMenu. style. left = x-2;
PopMenu. style. top = y-2;
PopMenu. style. visibility = "";
HiddenPop ();
}
Function HiddenPop ()
{
Layer1.style. visibility = 'did ';
}
</Script>
<BODY>
Right-click in the window to see what you can see :)
<Div id = Layer1 style = "position: absolute; width: 4px; height: 4px; z-index: 3; visibility: hidden">
<Select style = "width: 4"> </select>
</Div>
<Div id = PopMenu style = "position: absolute; width: 100px; height: 100px; z-index: 1; visibility: hidden">
<Table border = 2 width = 100>
<TH align = "center" color = "sliver" onclick = "">
Weiyu menu
</TH>
<Tr>
<Td>
Click it! :)
</Td>
</Tr>
</Table>
</Div>
</BODY>
</HTML>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
