Disable "save image" in iOS web application

Question

I want to disable the "save image" menu in mobile web applications that appears when you hold down a finger on an image. I tried the CSS properties:

-webkit-user-select: none;
-webkit-touch-callout: none;

With "-webkit-user-select" the copy menu is disabled but not the one for saving images. "-webkit-touch-callout" seems not to be working (tried on iPad2).

I also tried this javascript:

$('img').live('touchstart,touchmove,touchend', function() {
  event.preventDefault();
});

But without any effect.

Any suggestions? Thanks in advance!

Answer 1

I believe in this case pointer-events is your friend. You can simply add:

<img src="path/to/image.png" style="pointer-events:none" alt="">

And you should be good to go.

Answer 2

Well one thing you could do is cover the image with a transparent <div> tag. This would prevent the user form "clicking" (touching) the image at all:

<div style="position:relative;">
  <img src="something.png">
  <div style="position:absolute;left:0px;top:0px;right:0px;bottom:0px;z-index:1000"></div>
</div>

Note that if you send images to the browser they can be saved. This is just a workaround, a minor annoyance for anyone who really wants the images. If you can view it, you can copy/steal it.