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

Posted 2023-02-22

【中文标题】如何使用 javascript css 或 html attr 禁用 iOS 链接预览

【英文标题】：How to disable iOS Link Preview with javascript css or html attr

【发布时间】：2020-07-09 01:12:47

【问题描述】：

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

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

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

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

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

【问题讨论】：

嗨，你解决了吗？我正在网上搜索相同的问题

你好@davideghz，不。我只是为 iOS 做了一个小的布局修改，让所有区域都可以在没有链接的情况下排序，然后是外部的 链接按钮。我讨厌这种异常但找不到解决方案？？？？

【参考方案1】：

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

a 
  -webkit-touch-callout: none;

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

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

【讨论】：

谢谢，这将有助于解决这种烦人的行为是的，该弹出窗口在某些当前版本中已更改。