How to implement the right-click menu on the browser

Menu | browser | Right-click here today to learn how to implement a right-click menu in a browser that resembles the application's right mouse click.

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.


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, the last move, 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&GT;WEBJX 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= "" >

Right-click menu

</th>

< tr>

< td>

Click It!:)

</td>

</tr>

</table>

</div>

</body>