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扫雷

参考链接：js中的preventDefault与stopPropagation详解