在 Three.js 演示中无法通过触摸选择超链接

Question

刚刚测试了最近的 Three.js 教程@ https://tympanus.net/Tutorials/StickyImageEffect/，我发现了一些在尝试调试时困扰我的问题。

首先，在 iPad 和几部智能手机上进行测试时，超链接似乎处于活动状态，但对触摸和点击没有反应。 "sticky" effect/three.js 似乎完全控制了视口，并且不允许基于触摸的设备访问链接。

需要增加哪些内容才能允许选择链接，并且在此过程中还会忽略 "sticky" 效果的触发？

其次，在 iPad 横向查看时，视口顶部有一个小间隙。

这是否与触摸设备上未使用的光标有关？

Answer 1

我会search through the code looking for 'touchstart' and seeing if preventDefault is called. It is.

一个解决方案可能是为 <a> 标签添加您自己的 touchstart 处理程序

让我们测试一下

document.querySelector('#outer').addEventListener('touchstart', (e) => {
  e.preventDefault();
});

#outer {
  padding: 2em;
  background: #EEE;
}

<div id="outer">
   is <a href="https://whosebug.com">this link</a> touchable
</div>

上面的代码似乎阻止了 link 的工作。

将我们自己的事件处理程序添加到 link 本身并告诉它们不要传播。这样它们就不会传递给包含它们的元素，即调用 preventDefault 并防止默认事件（在 link 之后）发生

document.querySelector('#outer').addEventListener('touchstart', (e) => {
  e.preventDefault();
});

document.querySelectorAll('a').forEach((elem) => {
  elem.addEventListener('touchstart', stopPropagation);
  elem.addEventListener('touchmove', stopPropagation);
  elem.addEventListener('touchend', stopPropagation);
});

function stopPropagation(e) {
  e.stopPropagation();
}

#outer {
  padding: 2em;
  background: #EEE;
}

<div id="outer">
   is <a href="https://whosebug.com/">this link</a> touchable
</div>

它似乎对我有用。

不知道差距。没有要回购的 iPad 并且它似乎没有回购 the iPad emulation of the Chrome Devtools

在 Three.js 演示中无法通过触摸选择超链接

Hyperlinks not selectable by touch in Three.js demo

html

javascript

hyperlink

viewport

touch