I am trying to assign different functionalities to right and left click on my custom element.
Within the original code, I have set up event listeners for mouse clicks in the element file:
container.addEventListener("mousedown", startDrag);
container.addEventListener("contextmenu", onRightClick);
document.addEventListener("mouseup", endDrag);
In addition, I have defined methods that are supposed to modify arrays in the data section:
function startDrag(e) {
// implementation here
}
function endDrag(e) {
// details here
}
function onRightClick(e) {
// functionality here
}
The two arrays to be modified (referred to as intersected and rightClicked) are monitored, and custom events are triggered when changes are made
watch: {
intersected(i) {
this.$emit("change", i);
console.log("emitting change");
},
rightClicked(i) {
this.$emit("rightclicked", i);
console.log("emitting rightclicked");
}
},
While this setup is functioning correctly, my goal is to differentiate between left and right clicks. Currently, right clicking triggers both the context menu and the mousedown event. If I attempt to update the event listeners to
container.addEventListener("mousedown.left", startDrag);
container.addEventListener("contextmenu", onRightClick);
document.addEventListener("mouseup.left", endDrag);
left clicking results in no action being taken. The "change" event is not emitted. However, right clicking still emits "rightclicked" as intended.
What is the issue with my approach?