0

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!

Josiah Plett
  • 180
  • 14
  • They are likely both executing, but while dragging the event loop is overwhelmed with drag event handler tasks. Try throttling the drag event. – Randy Casburn Mar 03 '19 at 00:52
  • have a look at this answer https://stackoverflow.com/a/43408913/1675954 and this [codepen](https://codepen.io/kaolay/pen/bqKjVz) – Rachel Gallen Mar 03 '19 at 01:19

0 Answers0