Threejs的軌道控制器(OrbitControls)對touchmove冒泡事件的攔截
作者：咕魂
時間：2021年7月18日
問題描述:
創建控制器的方法：
new THREE.OrbitControls(camera, renderer.domElement) //創建控件對象
添加touch相關的事件監聽函數
document.addEventListener('touchstart', onTouchStart)
document.addEventListener('touchmove', onTouchMove)
document.addEventListener('touchend', onTouchEnd)
function onTouchStart(event){...}
function onTouchMove(event){...}
function onTouchEnd(event){...}
此時document的事件函數是renderer.domElement的父級
查看OrbitControls.js的源碼
找到onTouchMove(event)函數
往下找兩行可以看到
event.preventDefault()
event.stopPropagation()
其中stopPropagation()會對冒泡事件進行攔截，即上文中通過對document對象添加監聽函數會無法觸發
解決辦法：
直接改OrbitControls.js的源碼，注釋掉event.stopPropagation()
但一般不會這么做，畢竟這是人家官方給的
還有一個方法就是監聽事件不要掛載在document上，和OrbitControls.js中的onTouchMove(event)一樣，掛載到renderer.domElement上，即：
document.addEventListener('touchstart', onTouchStart)
renderer.domElement.addEventListener('touchmove', onTouchMove)
document.addEventListener('touchend', onTouchEnd)
之后就可以觸發onTouchMove函數了
應用項目：3D掃雷