javascript - 为什么添加另一个事件监听器后 FirstPersonControls.js 会停止运行？

Question

我正在尝试使用 FirstPersonControls.js 编写一个用于移动的 3d 环境，并为鼠标单击监听器编写以下内容:

function onDocumentMouseDown(event) {

    event.preventDefault();

    var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5);
    projector.unprojectVector(vector, camera);

    var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());

    var intersects = raycaster.intersectObjects(adblocks);

    if (intersects.length > 0) {

        intersects[0].object.material.color.setHex(Math.random() * 0xffffff);


    }
}

在 init() 中:

document.addEventListener('mousedown', onDocumentMouseDown, false);

我已经在另一个文档中完成了此操作，并且效果很好，但是，这次我尝试包含 FirstPersonControls.js。

在 FirstPersonControls.js 中，我通过注释掉监听器来禁用 mousedown 和 mouseup 监听器，如下所示:

//this.domElement.addEventListener( 'mousedown', bind( this, this.onMouseDown ), false );
//this.domElement.addEventListener( 'mouseup', bind( this, this.onMouseUp ), false );

效果很好。 FirstPersonControls.js 本身工作得很好。但是，当我为 MouseDown 事件添加额外的监听器时，键输入(w、a、s、d、q、r 和 f)停止响应。如果我在页面加载时立即按住某个键，该键将一直工作，直到我停止，然后一切都会停止响应。另外，另一件事我不明白，这可能是相关的，这就是我提到它的原因，如果我在 FirstPersonControls.js 中注释掉这一行:

this.domElement.addEventListener( 'mousemove', bind( this, this.onMouseMove ), false );

没有任何改变。一切都保持完全相同的功能，这对我来说没有意义，因为我认为这就是 mousemovement 事件绑定(bind)到文档的地方。

Answer 1

FirstPersonControl.js 脚本添加了 mousedown 事件的监听器函数。你的代码也是如此。当 mousedown 事件发生时，首先调用最后一个事件处理程序，通常，应随后调用其他事件处理程序。然而，这个:

event.preventDefault();

防止事件冒泡到其他事件处理程序。我相信删除这一行应该足以解决您所描述的问题。