如何使用JavaScript、CSS或HTML属性禁用iOS的链接预览功能

Question

在使用 Chrome/Safari 浏览器的 iOS 系统中，当你按住链接时，会显示一个烦人的链接预览。如果我有一个可排序的 <ul> 列表项（其中包含完整的链接），那么问题就来了。

iOS 问题： 当我按住刚要开始拖动事件时，这个烦人的系统模态框就会出现，阻止了所有的拖动过程，并且破坏了用户体验。

我试过阻止默认操作，在拖动开始时将元素内部的链接指针事件设置为无效，但没用，它还是会出现。

element.sortable.on('drag:start', (e) => {
      e.stopPropagation();
      e.preventDefault();

有什么想法可以用(js、css或某些html属性)来解决这个问题吗？谢谢提前

- Héctor León

---

嗨，你解决了吗？我正在网上搜索同样的问题。 - davideghz

你好@davideghz，不是的。我只是对iOS进行了一些小的布局修改，以便所有区域都可以排序而无需链接，然后将<a>链接按钮放在外面。我讨厌这种异常情况，但找不到解决办法。 - Héctor León

Answer 1

这个CSS样式会在iOS Safari上阻止你所指的触摸操作。在提问时，我认为默认弹出窗口是图片中显示的那个。但现在它会在一个小的模态窗口中导航到实际页面，并显示一些选项。

a {
  -webkit-touch-callout: none;
}

在iOS上进行测试，请导航到此链接：https://jsfiddle.net/hygf4Lrk/3/

默认情况下，它会阻止长按（大约1秒）和强制触摸（即瞬间用力按压）两种操作，这两种操作都会触发相同的链接预览动作。

- BobbyTables

---

谢谢，这将有助于解决这个烦人的行为。是的，某些当前版本中弹出窗口已更改。 - Héctor León