您可以阻止 3D 触摸<img>但不能点击并按住以保存吗？

Question

在iOS移动Safari浏览器上的<img>标签上，您可以点击并按住图像以显示保存工作表。您还可以3D触摸以弹出/偷看它。

您可以在保持点击并按住功能的同时阻止 3D 触摸吗？

Answer 1

使用此CSS 可阻止在任何图像上触发提示，并且不会禁用来自带有图像的按钮或标记的触摸事件，因此它们仍正常运行。

当您长按时，您仍然可以感受到触摸事件的触觉反馈，只是您不会得到提示/预览。

#root {
-webkit-touch-callout: none;
}

您可以在css中根据需要禁用或启用触摸标注

Answer 2

添加可拖动属性无法禁用 3D/力触摸。但是在作品中禁用指针事件(至少在iOS 12.2上(：

img {
pointer-events: none;
}

否则，您有一些关于 webkit 中强制触摸的文档：链接到 Apple 开发人员网站

Answer 3

来自具有可拖动属性的 HTML

<img src='yourimage.png' draggable='false'>

或者通过阻止浏览器对dragstart事件执行默认操作。也通过检查触摸力。

document.querySelectorAll('img').forEach(el=> {
el.addEventListener('dragstart', e => {
e.preventDefault(); 
return false; 
});
// customize your pressure force
const force = 0.2; 
// iOS
el.addEventListener('touchforcechange', e => {
if (e.changedTouches[0].force < force) {
e.preventDefault();
return false;
}
});
// Standard, Firefox
el.addEventListener('touchstart', e => {
if (e.targetTouches[0].force < force) {
e.preventDefault();
return false;
}
});
});

JSFiddle 示例

Answer 4

如果您将图像转换为数据网址 SVG 并通过 svg 标签嵌入它，那么您将无法 3D 触摸它。您还可以通过 SVG 标签链接到其他 SVG 图像。以下是有关如何使用该标签的 w3 学校链接：https://www.w3schools.com/html/html5_svg.asp