How to implement the right-click menu on the browser in JavaScript

menu | browser How to implement the right-click menu on the browser

One of the most recent discussions in the programmer's home base is how to implement a right-click menu in a browser that resembles the application's right mouse click. Only the fish tried and found it was not difficult to solve. Now will be the source code and principle said to share with you. Ha, in fact, the effect is not very perfect, if the heroes have a better solution. Can give the only fish yyu@enet.com.cn letter Luo.

The first thing to solve is what happens when the mouse right click does not appear on the IE menu. The idea can have two, one is to move the focus away, there is also a point in the page where the right menu does not appear, and will respond to mouse click message. (Haha, a lot of nonsense.) Idea? Always have to think more.


think about it, summed up the following methods


1, the response to the right key message out of an alert box (and a bit of fresh stuff does not).


2, in response to the right key message pops up a new window. Moves the focus of the initial page away.


But after the experiment found that only the window appears in the right mouse click position, will not have the browser's right button menu appears.


3, in response to the right key message pop-up an HTML dialog box. Even if you use ShowModalDialog to open an HTML dialog box. Use this method to make the right-click menu not appear. However, one problem is that using a dialog box that is open with ShowModalDialog does not remove the screen from the same range as the dialog box that is opened using window.open. That means you can always see a dialog box appearing on the screen. This road is not going to go.


4, Oh, the last resort, only fish occasionally found in the select on the right mouse click or left-click will not respond. Then, if each mouse is clicked on a select, the browser's right-click menu will not appear.



Here is an example, interested can be the following copy into test.html, you can 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= ' hidden ';

}


}

function ShowMenu ()

{

PopMenu.style.left = x-2;

PopMenu.style.top = y-2;

Popmenu.style.visibility= "";

Hiddenpop ();

}

function Hiddenpop ()

{

layer1.style.visibility= ' hidden ';

}

</script>

< body>


Right-click in the window to see what happens:

< 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= "" >

The only Fish menu

</th>

< tr>

< td>

Click It!:)

</td>

</tr>

</table>

</div>

</body>