Prevent Copy image in iOS web application

Is there a way of preventing the menu that appears when you hold down a finger on an image on an iPad or iPhone web application. I am creating a remote control and I use the ontouchstart and ontouchend built in functions开发者_JAVA百科 to create my "ontouchhold" function that I implemented. That function uses the ontouchstart and ontouchend built in functions to send IR signals via my computer which is acting as the server meanwhile the user is holding down its finger against an image (the ontouchend function will clear the interval). The only problem is that if the user holds its finger to long then the javaScript function ontouchhold that I implemented stops working because a menu pops up asking the user if he wants to copy/save the image. It will be nice if I could prevent this menu from appearing.

You can use:

-webkit-user-select: none;

This property makes the html elements not be not selectable and thus prevents that copy behaviour of iphone

-webkit-touch-callout: none; seems to do the trick of only preventing the copy/save dialog from opening without disabling any other events.

pointer-events: none; will also prevent the copy/save dialog but will also prevent any other dependent events attached to the image

You can add a preventDefault() to the element, which prevents the copy menu:

// HTML
<img scr="screenshot.jpg" id="dontshowcopy" />

// JS
element = document.getElementById('dontshowcopy');

element.addEventListener("touchstart",   preventCopy, false); // simple touch events
element.addEventListener("gesturestart", preventCopy, false); // events with more than one finger

function preventCopy(event) {
    event.preventDefault();
}

But it also prevents the scrolling when the swipe event was started on this element.

I don't know about iOS or mobile phones: but if you make the image a background image, it doesn't usually give you the option to save .....