“contextmenu” Event interrupts “onmousemove” from executing a function

I’m developing a Vue application using a Pinia store system.

I have a BoxView.vue component containing a grid of draggable elements with flip functionality implemented in BoxItem.vue.

In BoxView.vue, I have a “mousedown” EventListener attached to a “flip-box” element, which triggers the moveItemInit function:

<template>
  <div class="boxes-grid">
    <div v-for="(box, index) in getAllBoxes" :key="index" class="box-space">
      <BoxItem :id="box.id" @mousedown = 'moveItemInit($event.currentTarget as HTMLElement, $event)'> // <--------------------
        <template v-slot:front>
          <h2>{{ box.frontText }}</h2>
        </template>
        <template v-slot:back>
          <h2>{{ box.backText }}</h2>
        </template>
      </BoxItem>
    </div>
  </div>
</template>

In BoxItem.vue, I’ve implemented the “rotateInner” function to flip an element on right-click:

<template>
    <div class="flip-box" @contextmenu.prevent="rotateInner" > // <--------------------
      <div class="flip-box-inner" :class="{ 'flipped': isFlipped }">
        <div class="flip-box-front">
          <slot name="front"></slot>
        </div>
        <div class="flip-box-back">
          <slot name="back"></slot>
        </div>
      </div>
    </div>
</template>

<script setup>

  ...

  async function rotateInner(event: MouseEvent) {
    if (event.button === 2) {
      event.preventDefault()
      event.stopPropagation()
      isFlipped.value = !isFlipped.value
    }
  }
</script>

Now, my problem is related to the fact that at some point, the moveItemInit attaches an EventListener to the whole document like this:

    document.onmousemove = (eventNew) => moveItem(flipBoxElement, eventNew);

The “moveItem” function allows to drag an element by holding left mouse button across the page with no constraints. I want to be able to flip the element by right clicking it while it is dragged around, but the moment I do so, the element stops being moved and returns to its original position, which in my case indicates that the
document.onmouseup = (eventNew) => moveItemEnd(flipBoxElement, eventNew); was triggered prematurely.

How can I prevent right-click from interrupting the onmousemove event, allowing both dragging and flipping functionalities to work seamlessly? Any help would be greatly appreciated!

---

I have tried to use event.preventDefault() and event.stopPropagation() with no avail.

I expected the right mouse click to not interrupt the left mouse button being held down and calling the “moveItem” function.