你可以防止3D触摸而不是点按并按住保存吗？

Question

在iOS移动Safari上的<img>标签上，您可以点按并按住图像以显示“保存表”。您还可以通过3D触摸来弹出/查看它。

您可以在保持点按并保持功能的同时防止3D触控吗？

Answer 1

来自带有draggable属性的HTML

<img src='yourimage.png' draggable='false'>

或者通过浏览器阻止dragstart事件的默认操作。还通过检查触摸力。

document.querySelectorAll('img').forEach(el=> {

    el.addEventListener('dragstart', e => {
        e.preventDefault(); 
        return false; 
    });

    // iOS
    el.addEventListener('touchforcechange', e => {
        if (e.changedTouches[0].force < 0.1) {
            e.preventDefault();
            return false;
        }
    });

    // Standard, Firefox
    el.addEventListener('touchstart', e => {
        if (e.targetTouches[0].force < 0.1) {
            e.preventDefault();
            return false;
        }
    });

});

JSFiddle的例子

Answer 2

添加可拖动属性不起作用以禁用3D /强制触摸。但是在工作中禁用指针事件（至少在iOS 12.2上）：

img {
  pointer-events: none;
}

另外，你在webkit中有一些关于强制触摸的文档：Link to Apple developer site