preventDefault on touchstart without preventing scrolling

Question

There are similar questions to this one, but the solutions either involve another library or using a click event instead - I wondered if it was feasible to achieve without a library.

I'm using a touchstart event on an image to detect a tap of 1.5s, which then reloads said image. However on most mobile devices when you press and hold on an image for a period of time, it displays a popup to ask if you would like to save/copy the image, which I would like to prevent.

preventDefault() does the trick, but ignores scrolling on the image too (as expected).

What would be the best way to also allow scrolling on the image?

Example code:

$('#the-image').bind('touchstart', function(event) {
    event.preventDefault();
    //detects long tap, then reloads etc
});

iOS has a CSS property (-webkit-touch-callout:none) that works fine, but will not work on non-iOS devices.

Any help is appreciated.

Answer 1

Try -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; if you can use CSS.

And a nice trick would be node.ontouchstart = node.onclick; so it thinks you're using a computer mouse.

See Disabling the context menu on long taps on Android