在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模擬中似乎也沒有回購協議