addEventListener("mousedown.left") not working in Vue.js

Question

I want to make right and left click do different things on my custom element.

In this original code. in the element file I defined some event listeners for mouse clicks:

container.addEventListener("mousedown", startDrag);
container.addEventListener("contextmenu", onRightClick);

document.addEventListener("mouseup", endDrag);

And some methods that's supposed to be called which will alter an array in the data section:

function startDrag(e) {
    // some code here
}

function endDrag(e) {
    // some code here
}

function onRightClick(e) {
    // some code here
}

The two arrays to be altered (named here intersected and rightClicked are watched, and custom events are emitted when they're altered

watch: {
    intersected(i) {
      this.$emit("change", i);
      console.log("emitting change");
    },
    rightClicked(i) {
      this.$emit("rightclicked", i);
      console.log("emitting rightclicked");
    }
},

So they work perfectly fine. However as I said, I want left and right click to do different things, and as of now right clicking triggers both contextmenu and mousedown. If I change the event listeners to

container.addEventListener("mousedown.left", startDrag);
container.addEventListener("contextmenu", onRightClick);

document.addEventListener("mouseup.left", endDrag);

left clicking would do nothing. The event change was never emitted. Right clicking still emits rightclicked as expected.

What am I doing wrong here?

Does view somehow capture events and spit out non standard events? There is no `mousedown.left` — epascarello, Mar 07 '23 at 18:40
https://stackoverflow.com/questions/1206203/how-to-distinguish-between-left-and-right-mouse-click-with-jquery — epascarello, Mar 07 '23 at 18:42

score 0 · Answer 1 · answered Mar 07 '23 at 18:56

The event.button property to determine which mouse button was clicked.

Try this:

container.addEventListener("mousedown", function(event) {
  if (event.button === 0) {
    startDrag(event);
  }
});

container.addEventListener("contextmenu", function(event) {
  event.preventDefault(); // prevent the context menu from showing up
  onRightClick(event);
});

document.addEventListener("mouseup", function(event) {
  if (event.button === 0) {
    endDrag(event);
  }
});

addEventListener("mousedown.left") not working in Vue.js

1 Answers1