On <img> tags on iOS mobile Safari, you can tap and hold on an image to bring up a Save Sheet. You can also 3D touch to pop/peek it.
Can you prevent 3D touch while maintaining the tap and hold functionality?
On <img> tags on iOS mobile Safari, you can tap and hold on an image to bring up a Save Sheet. You can also 3D touch to pop/peek it.
Can you prevent 3D touch while maintaining the tap and hold functionality?
Share Improve this question edited Oct 10, 2018 at 17:51 vadersfather asked Jun 22, 2018 at 4:54 vadersfathervadersfather 9,3497 gold badges36 silver badges59 bronze badges 3- stackoverflow./q/42160260/2873331 this might help – yeshashah Commented Jun 25, 2018 at 16:57
- You might also consider using this library: pressurejs. – yeshashah Commented Jun 25, 2018 at 16:59
- Any code sample? – Firanolfind Commented Jun 28, 2018 at 7:26
4 Answers
Reset to default 5Using this CSS stops the prompt from firing on any image and won't disable touch events from buttons or markers with images so they still function as normal.
You can still feel the haptic feedback from the touch event when you long press also, you just won't get the prompt/preview.
#root {
-webkit-touch-callout: none;
}
You can disable or enable the touch-callout as you wish in your css
Adding a draggable attribute doesn't work to disable the 3D/force touch. But disabling pointer-events on the works (on iOS 12.2 at least):
img {
pointer-events: none;
}
Else you have some documentation about force touch in webkit here: Link to Apple developer site
From HTML with draggable attribute
<img src='yourimage.png' draggable='false'>
Or by preventing default action by browser for dragstart event. Also by checking touch force.
document.querySelectorAll('img').forEach(el=> {
el.addEventListener('dragstart', e => {
e.preventDefault();
return false;
});
// customize your pressure force
const force = 0.2;
// iOS
el.addEventListener('touchforcechange', e => {
if (e.changedTouches[0].force < force) {
e.preventDefault();
return false;
}
});
// Standard, Firefox
el.addEventListener('touchstart', e => {
if (e.targetTouches[0].force < force) {
e.preventDefault();
return false;
}
});
});
JSFiddle example
If you convert your image to a data-url SVG and embed it through the svg tag then you cannot 3D touch it. You can also link to other SVG images through the SVG tag. Here is a w3 schools link on how to use the tag: https://www.w3schools./html/html5_svg.asp