Threejs轨道控制器(OrbitControls)对touchmove事件的拦截
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扫雷
