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

Question

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

一开始是想监听touchforcechange事件，等到力到一定程度再调用preventDefault。像这样的：

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

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

但是，这似乎也阻止了长按事件。似乎也没有一个特定的力度级别可以将事件切换到 Force Touch。

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

任何想法都非常感谢！

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 触摸的元素的类。在您的情况下，可能是 galary 中所有图像元素共享的一个类。

我认为您的主要问题是 0.5 可能是一个过高的阈值。

Answer 2

您可以将图像嵌入到 svg 标签中以防止这种情况发生。