Javascript addEventListener isn't allowing more than one mouse event

290 views Asked by At

I am trying to add multiple event listeners listening for mouse events to a single element, but only one event is ever activating. When I have a 'drag' event listener and a 'mouseup' event listener, only the drag event executes, and when I change the 'mouseup' listener to listen for a 'click', only the click event ever executes.

Is there some sort of hierarchy for the event listeners? Also, I am using a Physi.js block as the element, so I'm not sure if there are special requirements for it, although single event listeners have worked fine in the past.

This is the block:

block = new Physijs.ConvexMesh(
new THREE.CubeGeometry(16, 16, 11),
  new THREE.MeshBasicMaterial({
    map: THREE.ImageUtils.loadTexture(tier + '.png'),
    transparent: true
  })
);
scene.add(block);

And here is the section of the code with the event listeners:

block.addEventListener('drag', function (event) {
  block.dragged(event.x_diff, event.y_diff);
  console.log("drag");
});
block.addEventListener('click', function (event) {
  console.log("click");
});

It seems that no matter how I place the event listeners, or which mouse events they are, only one will ever execute.

I am open to any kind of solution as long as it uses Javascript, HTML, or CSS. Is there a way to put all the listeners in one function call, or maybe a different kind of event listener that works for multiple events?

If you need any other code or information, let me know.

Thank you so much for your time!

0

There are 0 answers