防止图像上的强制触摸事件，但仍允许 iOS Safari 中的长按事件

Question

我们的图像库需要防止 Apple 对图像的强制触摸事件，但仍然允许长按触发“保存图像”标注。我们为 iOS 用户提供了长按图像然后选择“保存图像”的说明，但如果用户不小心按得太用力并触发强制触摸事件，尤其是当它“弹出”并加载图像时，用户会感到非常困惑在新页面中。

最初我想到的是监听事件touchforcechange，然后preventDefault当力量达到一定程度时打电话。像这样的东西：

imgEl.addEventListener( 'touchforcechange', 'onTouchForceChange', false )

function onTouchForceChange( e ){
    if( e.changedTouches[0].force > 0.5  ){
        e.preventDefault()
    }
}

然而，这似乎也阻碍了长新闻活动。似乎也没有一个特定的力度级别可以将事件切换为力度触摸。

将 css 属性添加-webkit-touch-callout: none;到图像确实会阻止强制触摸事件，但同样，它也会阻止长按时的标注。

任何想法都非常感谢！

Answer 1

（使用 jQuery，但没有它也可以完成）

这似乎对我有用，在 iPhone 7 加 iOS 10.3.3 上测试：

window.addEventListener('touchforcechange', function(event) {
        var force = event.changedTouches[0].force;
        var id = event.changedTouches[0].target.id;

        if ($('#' + id).hasClass('class') && force > 0.1) {
            event.preventDefault();
            console.log('prevented 3D touch on element with id = ' + id);
        }
    });

将 'class' 替换为应阻止 3d 触摸的元素的类。在你的情况下，可能是画廊中所有图像元素共享的类。

我认为你的主要问题是 0.5 的阈值可能太高了。