Disable callout (context menu) on mobile IE
css, html, internet-explorer, javascript, web-applications
Solution
I did a bunch of research and as far as I can tell these are your two options:
- Use a transparent `<div>` to cover the link/image
- using a `<div>` with `style="background: url(yourimage.png)"` instead of `<img src="yourimage.png">`
The core problem is that mobile IE on Windows Phone doesn't properly handle `preventDefault` with `contextmenu` events. That is the proper way to do this and it works in every other browser. The `contextmenu` event is fired on WP IE but it actually happens when the long press context menu is dismissed. It should happen before even showing the menu so that you can prevent it.
Here are some of the other options I tried:
Events: I tried registering for every event and using `e.preventDefault()`, `e.stopPropagation()` and `return false` to prevent all of the default actions. JSBin example.
Use `element:before` or `element:after` to place an element on top of the link or image. I thought this might be able to automatically do what the transparent `<div>` does. Unfortunately the `:before` or `:after` content is part of the `<a>` so it is all clickable as well. Also, apprently `<img>` elements don't support `:before` or `:after`. JSBin example.
`user-select: none`
- `-ms-touch-action`
- `-webkit-touch-callout: none`
- I even pinged someone on the IE team and he didn't know of a way.
Problem
In a web app, I need to disable the default callout that mobile browsers shows when touching and holding ("long tap") on a touch target, such as an `<img>` or a link. I am already using `-webkit-touch-callout: none` for iPhone and iPad. I tried `-ms-touch-action:none` and `touch-action:none` for IE, but this doesn't seem to work (tested on IE11, Windows Phone 8). This post from the W3 mailing list suggests adding a listener for the "contextmenu" event in Javascript and calling `e.preventDefault()`. This does not seem to work either. Any suggestions?