你可以阻止<img>上的3D触摸,但不能点按并按住保存吗？

Question

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

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

Answer 1

来自具有可拖动属性的 HTML

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

或者通过阻止浏览器对dragstart事件执行默认操作。还可以通过检查触摸力。

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示例