Question

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

首先，在iPad和几个智能手机上进行测试时，超链接似乎处于活动状态，但对触摸和点击无响应。似乎“粘性”效果/three.js完全控制了视口，并且不允许基于触摸的设备访问链接。

需要进行哪些扩展才能选择链接，并且在此过程中还忽略了触发“粘性”效果的过程？

第二，以横向观看iPad时，视口顶部会有一个小缝隙。

这完全与触摸设备上未使用的光标有关吗？

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，并且似乎没有在the iPad emulation of the Chrome Devtools

中回购的iPad

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

1 个答案: