如何使用 javascript css 或 html attr 禁用 iOS 链接预览

Question

当您在带有 iOS 的 Chrome / Safari 中按住链接时，它会显示一个烦人的链接预览，当我有一个可排序的 <ul> 列表项时就会出现问题（里面有完整的链接） 因此，如果您按住拖动（拖动事件出现在我的<li> 上，如果您单击/点击，则转到链接<a>。

iOS问题：当我在应该开始拖动事件的时候按住，这个烦人的系统模态出现了，阻塞了所有的拖动过程并破坏了用户体验。

我已经尝试阻止默认操作，当拖动开始时，指针事件没有元素内的链接，但是什么都没有，一直出现

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

任何想法如何解决这个问题（js、css 或一些 html attr ？）在此先感谢

Answer 1

这种 css 样式会阻止您在 iOS safari 上引用的触摸动作。在提问时，我相信默认弹出窗口是图片中显示的那个。但现在它在一个小的模态窗口中导航到实际页面，除了显示一些选项

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

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

它同时阻止长按（点击并按住可能 1 秒）和强制触摸（用力但立即按下），默认情况下会导致相同的链接预览操作。