Disable callout (context menu) on mobile IE

Question

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?

Answer 1

I tried every "normal" or "elegant" option out there, but apparently IE11 mobile ignores every single one of them.

• CSS properties: -webkit-touch-callout equivalent for IE
• The preventDefault method Microsoft suggests: https://msdn.microsoft.com/en-US/en-en/library/jj583807(v=vs.85).aspx
• Catching all touch events: Disabling the context menu on long taps on Android
• A homebrewn oncontextmenu callback with stopPropagation and preventDefault

The only thing actually working is the old ugly div-over-image:

<div class="img-container">
  <img src="path/to/image.jpeg" />
  <div class="cover"></div>
</div>

CSS:

.img-container {
  position: relative;
}
.cover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Answer 2

I did a bunch of research and as far as I can tell these are your two options:

1. Use a transparent <div> to cover the link/image
2. 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:

1. 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 .

2. 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 .

3. user-select: none

4. -ms-touch-action
5. -webkit-touch-callout: none
6. I even pinged someone on the IE team and he didn't know of a way.