Javascript 避免将keydown事件从dat.GUI传播到Three.js场景

我有两个事件侦听器的代码（见下文）：

renderer.domElement.addEventListener("pointerdown", changeColor, false);
document.addEventListener("keydown", changeColor, false);

它们都会触发立方体中的颜色变化。但是，当我在GUI中编辑输入参数时，

keydown

事件也会导致颜色更改，我希望避免这种情况

我猜这是因为我正在使用

document.addEventListener

来处理

keydown

事件。但是，如果我使用

renderer.doElement.addEventListener

，它将无法工作

在编辑GUI参数时，如何避免要传播的

keydown

事件

代码

var渲染器、控件、场景、摄影机；
var立方；
init（）；
函数init（）{
//场面
场景=新的三个。场景（）；
scene.background=新的三种颜色（0xB0）；
//摄像机
摄像头=新的三个透视摄像头（30，window.innerWidth/window.innerHeight，11000）；
摄像机。位置。设置（300300300）；
摄像机设置（0,0,1）；
//轻的
var环境光=新的三个环境光（0xCCCC，0.2）；
场景。添加（环境光）；
//助手
var helpers=new THREE.Group（）；
var grid=new THREE.GridHelper（200,10）；
grid.rotation.x=Math.PI/2；
var轴=三个。AxisHelper（100）；
helpers.add（网格）；
helpers.add（axis）；
场景。添加（助手）；
//渲染器
renderer=new THREE.WebGLRenderer（{antialas:true}）；
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
//控制
控件=新的三个.轨道控件（摄影机、渲染器.doElement）；
//事件侦听器
控件。addEventListener（“更改”，呈现，false）；
//画立方体
var cubeGeometry=新的三箱几何体（50,50,50）；
var cubeMaterial=新的3.MeshBasicMaterial（{color:0x000088}）；
立方体=新的三网格（立方计量法、立方材料）；
场景.添加（立方体）；
//桂
参数={
尺码：50，
};
var gui=new dat.gui（）；
添加（参数“大小”，0.01001）；
//听众
renderer.domeElement.addEventListener（“pointerdown”，changeColor，false）；
文件。添加了文本列表（“向下键”，更改颜色，错误）；
//渲染
render（）；
}
函数更改颜色（事件）{
cube.material.color.set（Math.random（）*0xffffff）；
cube.material.needsUpdate=true；
render（）；
}
函数render（）{
渲染器。渲染（场景、摄影机）；
}

正文{
溢出：隐藏；
保证金：0；
}

---

不确定这是最好的方法，但您可以通过检查事件处理程序的目标来忽略事件处理程序中的键控事件。如果目标是

输入

，则不执行任何操作：

函数更改颜色（事件）{
//编辑dat.GUI输入值时忽略键事件
if（event.target.localName==“输入”）{
返回；
}
// [...]
}