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?
Share Improve this question edited Jan 6, 2017 at 10:57 scripter asked Jan 6, 2017 at 10:35 scripterscripter 1,5264 gold badges20 silver badges36 bronze badges 5- 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
Reset to default 4Press 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()}
/>