prevent windows 8 right click square

Question

I have a website (NOT windows 8 app), and it expects the user to be able to hold down their finger on a certain icon for several seconds if they are using touch. However, this causes the "right click square" to appear in Windows 8. It does not stop the page from working properly, but it is annoying and may confuse the user. Is there any way to prevent the square from coming up? I understand that there probably is some really simple, logical way to do this in IE (as microsoft seemed to make it very touch-friendly), but I am aiming at chrome, firefox, and opera as well, as they support touch events and stuff on windows 8 touchscreen computers. I have already tried cancelling the contextmenu event, that just stops the menu from coming up.

Answer 1

IE10 has the event MSHoldVisual to bring up the square. You can cancel both MSHoldVisual and contextmenu to stop this behavior.

// Disables visual
element.addEventListener("MSHoldVisual", function(e) { e.preventDefault(); }, false);
// Disables menu
element.addEventListener("contextmenu", function(e) { e.preventDefault(); }, false);

According to this MSDN page: http://msdn.microsoft.com/en-us/library/ie/hh673557(v=vs.85).aspx#context_menus

Answer 2

Check out if the update that Marcin has mentioned in the below item works for you. I am posting this as an answer as I am not able to add a comment :)

Source: Disable tooltips for links

Code:

document.addEventListener("MSHoldVisual", 
                           function(e) { 
                               e.preventDefault(); 
                           }, false);