Default keeping tap on the screen (eg. hold tap for 1 second) will show a option of save image / copy. However , I would like to turn off that function for my web app , is it possible? I have tried to replace the event of touchmove to selectall , however it does not work . Thanks for helping.

addEventListener('touchmove', function(e) { e.preventDefault(); }, true);

Default keeping tap on the screen (eg. hold tap for 1 second) will show a option of save image / copy. However , I would like to turn off that function for my web app , is it possible? I have tried to replace the event of touchmove to selectall , however it does not work . Thanks for helping.

addEventListener('touchmove', function(e) { e.preventDefault(); }, true);

• javascript
• jquery
• ipad

Share Improve this question Follow edited Dec 20, 2012 at 2:22 user782104 asked Dec 19, 2012 at 9:28 user782104user782104 13.6k6060 gold badges178178 silver badges315315 bronze badges 3

• 1 Are you certain you're listening to the right event ('touchmove')? If I want to save a image on my iPad, I can't move my finger (much), or the popup won't show. – Cerbrus Commented Dec 19, 2012 at 9:30
• For sure the touchmove is not the correct event, therefore I wonder which is the correct event name . – user782104 Commented Dec 19, 2012 at 9:31
• 1 Have a look at the different event handlers for touch events. (I'm not sure you can even prevent the "save?" dialog) – Cerbrus Commented Dec 19, 2012 at 9:33

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

It could be beneficial to disable not only preventDefault, but other properties as well:

e.preventDefault(); 
e.cancelBubble = true;
e.returnValue = false;
return false;

Also the event, are you sure it's touchmove ?

I thought it would be worth mentioning that you can do this with pure CSS. It's probably not a really great idea, because neither IE10 or Opera Mobile support it. But it can be done, and in the future, this would probably be a better way than with JavaScript. Or if you're only talking about iPhones and iPads, this method would work really well. Here's an example on CodePen.

The code is simple:

.notouch {
    pointer-events: none;
}

Just give the class of notouch to any image that you want to effect.

If you want to do it to every image on the page, do this:

img {
    pointer-events: none;
}

And I should give an obligatory speech on useability. By doing this you're overriding default functionality that people expect to be there all the time. It makes for a really bad experience for you to turn off something like this, unless you have a really, really good reason to do so. So please, make sure you do.

Edit:

To get rid of the magnifying glass, use this code:

.notouch {
    pointer-events: none;
    -webkit-user-select:none;
}

With -webkit-user-select set to 'none' you may not even need to turn off pointer events, but I'm not sure about that. I updated the CodePen as well.