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

Question

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

首先，在 iPad 和几部智能手机上进行测试时，超链接看似活跃，但对触摸和点击没有响应。看来“粘性”effect/two.js 完全控制了视口(viewport)，并且不允许基于触摸的设备访问链接。

需要增强什么才能允许选择链接并在此过程中忽略“粘性”效果的触发？

其次，在 iPad 上横向查看时，视口(viewport)顶部会出现一个小间隙。

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

Answer 1

我会search through the code寻找“touchstart”并查看是否 preventDefault叫做。 It is .

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

我们来测试一下

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

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

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

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

将我们自己的事件处理程序添加到链接本身并告诉它们不要传播。这样它们就不会被传递到包含它们的元素，即调用 preventDefault 的元素。并防止发生默认情况(点击链接)

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://stackoverflow.com/">this link</a> touchable
</div>

它似乎对我有用。

不知道差距。没有 iPad 可以 repo ，并且它似乎没有在 the iPad emulation of the Chrome Devtools 中 repo