If you try in chrome pressing and holding an image, a popup es with option for save it etc. What I am trying to achieve is using an image with touch event to make it move on screen. But whenever I press and hold it I face the above. Any way to remove it?

If you try in chrome pressing and holding an image, a popup es with option for save it etc. What I am trying to achieve is using an image with touch event to make it move on screen. But whenever I press and hold it I face the above. Any way to remove it?

• javascript
• html
• css

• I just realised this is unclear - are you specifically trying to prevent downloading, or just enable dragging ? – Alnitak Commented Jan 6, 2017 at 10:39
• Prevent downloading, so that user can press and hold and would be able to move it without any popup that usually es. – scripter Commented Jan 6, 2017 at 10:50
• 1 that's what I meant by unclear. Your actual intent is to enable moving. You don't actually want to prevent downloading (e.g. to make it harder to steal your image) - you want to disable the context menu – Alnitak Commented Jan 6, 2017 at 10:52
• Yes. Sorry didn't clear that earlier. You are right. – scripter Commented Jan 6, 2017 at 10:53
• I suggest that you should re-write the title of your question... – Alnitak Commented Jan 6, 2017 at 10:55

3 Answers 3

Press and hold on a mobile is the equivalent of a desktop contextmenu event. If you add a handler for this event to your object, return false and call event.preventDefault(); you should not have the issue.

You can try using pointer-events: none; css to the image and target this css only for mobiles using media query.

More about Pointer events here

If you decide to use pointer-events: none, this approach will likely block the logic you intend to apply to your image. What I remend is to explicitly block the context menu. In React, you can achieve this as follows:

<img
    src={imgSrc}
    width={width}
    height={height}
    onContextMenu={(e) => e.preventDefault()}
/>