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

我们需要在图像库中防止苹果对图像的强制触摸事件，但仍然允许长按触发“保存图像”调用。我们为我们的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到图像”会阻止强制触摸事件，但同样，它也会阻止长按上的标注

非常感谢您的任何想法
 （使用jQuery，但可能不用它也可以完成）

这似乎适合我，在iPhone 7 plus 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可能太高了
 您可以将图像嵌入到svg标记中以防止出现这种情况。
看起来WebKit团队正在调查处理强制单击的事件，这可能会提供足够的控制来执行此操作。“然而，这似乎也阻碍了长时间的新闻活动。似乎也没有一个特定的力量水平，在这个水平上，事件切换为力量触碰。”这是真的吗？这可能有一个常数。你应该在你的答案中提供更多的细节以便更有帮助