Question

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

最初我想到听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 touch的元素类。在你的情况下，可能是由galary中的所有图像元素共享的类。

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

Answer 2

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

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

2 个答案: