Why do FirstPersonControls.js stop functioning when another event listener is added?

Why do FirstPersonControls.js stop functioning when another event listener
is added?

I'm trying to write a 3d environment with FirstPersonControls.js for the
movement and the following for the mouseclick listener:
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);
}
}
and in init():
document.addEventListener('mousedown', onDocumentMouseDown, false);
I've done this on another document and it worked fine, however, this time
I'm trying to include FirstPersonControls.js.
In FirstPersonControls.js, I disabled the mousedown and mouseup listeners,
by commenting out the listeners, like this:
//this.domElement.addEventListener( 'mousedown', bind( this,
this.onMouseDown ), false );
//this.domElement.addEventListener( 'mouseup', bind( this, this.onMouseUp
), false );
That worked fine. FirstPersonControls.js works fine by itself. However,
when I add the extra listener for the MouseDown event, the key input (w,
a, s, d, q, r, and f) stop responding. If I hold down a key immediately at
page load, that key will work until I stop, then everything stops
responding. Also, another thing I don't understand, and this may be
related, which is why I'm mentioning it, is if I comment out this line in
FirstPersonControls.js:
this.domElement.addEventListener( 'mousemove', bind( this,
this.onMouseMove ), false );
Nothing is changed. Everything keeps functioning exactly the same, which
doesn't make sense to me, because I thought that's where the mousemovement
event is binded to the document.