How to disable context menu (Save and Share Photo) at IE with Windows Phone

Question

I have a page that shows some photos. My users can not save the photos.

My solution to not save is disable browser context menu, works like a charm at all browsers, but doesn't works IE browser at Window Phone. When I touch and hold image, the native Windows Phone context menu appears to save or share.

I have tried with CSS

.img-disable-save{
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -khtml-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    touch-action: none !important;
}

I have tried with Javascript, like this MSDN DOC

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

And finally, I have tried like this post Disabling the context menu on long taps

Really, nothing works ;-(.

I don't know what to do now, my options finished. This only happens at Windows Phone.

Somebody can help me?

Bruce · Answer 1 · 2015-03-17T13:10:36.720

Well, I made a workaround with opacity DIV. This worked for all, including IE for Windows Phone.

With this approach, we are sure that no context menu to save image will be appears. For all browsers it is a simple DIV, not a IMG.

Look what are you have to do.

<!DOCTYPE html>
<html>

<head>

 <style>
  .image-panel{
   position: relative;
  }
  
  .image-panel .lock-save{
   position: absolute; 
   top: 0px; 
   left: 0px; 
   right: 0px; 
   bottom: 0px; 
   opacity: 0.0;
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
  }
 </style>

 <script>
  function init(){
   blockContextMenu();
  }
  
  //It's not necessary, but don't show others options from context menu 
  function blockContextMenu(){
   document.addEventListener("contextmenu", function(e) { 
    e.preventDefault();
    return false;
   }, false);
  }
 </script>

</head>

<body onload="init()">

<div class="image-panel">
 <!-- This DIV below makes the lock save image -->
 <div class="lock-save"></div>
 <img id="imgLarge" style="width: 100%;" src="http://i.imgur.com/0hmvq40.jpg" />
</div>


</body>
</html>

A second solution is put image as background. NOTE: Maybe you have to know the size of image to set at DIV.

<!DOCTYPE html>
<html>

<head>

 <style>
  .image-panel{
   height: 769px;
   background-image: url('http://i.imgur.com/0hmvq40.jpg');
  }
 </style>

 <script>
  function init(){
   blockContextMenu();
  }
  
  //It's not necessary, but don't show others options from context menu 
  function blockContextMenu(){
   document.addEventListener("contextmenu", function(e) { 
    e.preventDefault();
    return false;
   }, false);
  }
 </script>

</head>

<body onload="init()">

<div class="image-panel"></div>

</body>
</html>

How to disable context menu (Save and Share Photo) at IE with Windows Phone

1 Answers1