How to implement the right-click menu on the browser_javascript skills

In a recent discussion at the Programmer’s Basement, a guy proposed how to achieve an effect in the browser that is similar to the right-click menu that appears after right-clicking the mouse on an application. Weiyu tried it and found that it was not difficult to solve. Now let’s share the source code and principles with everyone. Ha, actually the effect is not perfect. If any hero has a better solution. You can write to Weiyu at yyu@enet.com.cn.

The first problem to be solved is under what circumstances the IE menu will not appear when right-clicking the mouse. There are two ideas, one is to move the focus, and the other is that the right-click menu will not appear when you click somewhere on the web page, and it will respond to mouse click messages. (Haha, a lot of nonsense. Any ideas? You have to think more to find one)


After thinking about it, I came up with the following methods
1. Respond to the right-click message and send a message ALERT box (there is still no fresh stuff).
2. A new window will pop up after responding to the right-click message. Move focus away from the home page.
However, after testing, it was found that only when the window appears at the location where the mouse is right-clicked, the browser's right-click menu will not appear.
3. An HTML dialog box will pop up after responding to the right-click message. That is, use showModalDialog to open an HTML dialog box. Use this method to prevent the right-click menu from appearing. But there is a problem is that the dialog box opened using showModalDialog will not move out of the scope of the screen like the dialog box opened using Window.Open. This means that you can always see a dialog box appearing on the screen. We can't go down this road either.
4. Haha, this is the last resort. Weiyu occasionally found that there would be no response when right-clicking or left-clicking on Select. So if the mouse is clicked on Select every time, the browser's right-click menu will not appear.

The following is an example. If you are interested, you can copy the following into Test.html and see the effect.



VFish Test



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='hidden';

}


}

function showMenu()

{

PopMenu.style.left = x- 2;

PopMenu.style.top = y- 2;

PopMenu.style.visibility "";

HiddenPop();

}

function HiddenPop()

{

Layer1.style.visibility= 'hidden';

}






Right-click in the window and see what happens :)













Weiyu’s menu







click it!:)