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

Question

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

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

需要增加什么以允许选择链接，并且在此过程中还忽略了“粘滞”效应的触发？

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

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

Answer 1

我将在代码中搜索 “ touchstart”，并查看是否preventDefault 。 是的 。

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

让我们测试

 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，并且在Chrome Devtools的iPad模拟中似乎也没有回购协议