javascript - 阻止图像上的强制触摸事件，但仍允许在 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);
        }
    });

将“类”替换为应阻止 3d 触摸的元素的类。在你的例子中，可能是 galary 中所有图像元素共享的一个类。

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