你能阻止 3D 触摸吗？<img> 但不能点击并按住保存？

Question

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?

Answer 1

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

Answer 2

Using 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

Answer 3

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

Answer 4

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.com/html/html5_svg.asp