时间戳

首页 > 解决方案 > 如何使用 javascript css 或 html attr 禁用 iOS 链接预览

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

问题描述

当您在带有 iOS 的 Chrome / Safari 中按住一个链接时，它会显示一个烦人的链接预览，当我有一个可排序的<ul>列表项（其中包含完整链接）时就会出现问题所以如果您按住拖动（拖动事件出现在我的<li>if你点击/点击你去链接<a>。

iOS 问题： 当我按住它应该开始拖动事件时，出现这个烦人的系统模式，阻止所有拖动过程并破坏 UX。

我尝试阻止默认操作，当拖动开始时，指针事件没有元素内的链接，但没有任何东西，不断出现

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

任何想法如何解决这个问题（js，css或一些html attr？）提前谢谢

在此处输入图像描述

标签： javascripthtmliosgoogle-chromedom

解决方案

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

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

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

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

推荐阅读