Disable the default feature when you click on Safari iPad

Question

A default hold on the screen (for example, holding pressed for 1 second) will show the ability to save the image / copy . However, I would like to disable this feature for my web application, is this possible? I tried replacing the touchmove event with selectall, however it does not work. Thanks for the help.

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

Answer 1

I thought it was worth mentioning that you can do this with pure CSS. This is probably not a good idea, because neither IE10 nor Opera Mobile support it. But this can be done, and in the future it will probably be better than with JavaScript. Or, if you are talking only about the iPhone and iPad, this method will work very well. Here is an example in CodePen .

The code is simple:

 .notouch { pointer-events: none; } 

Just give the notouch class any image you want to use.

If you want to do this for each image on the page, do the following:

 img { pointer-events: none; } 

And I have to give a mandatory talk about use. By doing this, you override the default functionality that people expect there all the time. This makes it a really bad experience for you to turn off something like this if you don’t have a really, really good reason. So please make sure you do this.

Edit

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

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

If the -webkit-user-select parameter is set to "none", you don’t even need to disable pointer events, but I'm not so sure. I also updated CodePen.

Answer 2

It would be useful to disable not only preventDefault, but also other properties:

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

Also an event, are you sure that it is touchmove?