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?

Maybe also try MSHoldVisual, MSGesture (https://msdn.microsoft.com/en-us/library/ie/jj583807%28v=vs.85%29.aspx)? If preventDefault doesn't work on img, the only hacky thing I would do is to try to put a div on top of the image and prevent clicks/touch on it. But you probably already know that, and that's dirty code so I wouldn't really advise it. — Micaël Félix, Feb 19 '15 at 16:06

score 2 · Answer 1 · edited May 23 '17 at 11:59

2

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;
}

edited May 23 '17 at 11:59

Community

1
1

answered Dec 18 '15 at 15:21

Rudolf

1,856
2
19
32

Apparently there is no elegant answer, sorry. I tested these in Browserstack, and provided links to what I tried. – Rudolf Dec 21 '15 at 20:57
Both this answer and pseudsavant's one show some good research. I upvoted both, however I am finally accepting pseudosavant's answer because it also includes an explanation of why the 'canonical' method of calling preventDefault() in the contextmenu event doesn't work. – Grodriguez Dec 23 '15 at 15:52

score 2 · Accepted Answer · answered Dec 21 '15 at 21:39

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.

Disable callout (context menu) on mobile IE

2 Answers2