@mousedown.stop conflicting with @click.stop event which bubble to parent

[andrewspy]

Consider the code below, I intended to trigger the "more..." button with @mousedown without triggering the @click counter from the parent.

Any idea what's happening and any workaround, or is this an intended behavior?

Also available in playground,

https://play.vuejs.org/#eNp9U9tq3DAQ/ZWpXpKQVBvaQiE4pRfy0EIvtH2rSnG9440SWRK6eBeM/z0j+bLeJOyTpDlnzpyRRh37YC1vI7IrVvjKSRvAY4j2ndCyscYF6MBhDT3UzjRwQtQToYWujPYBKhN1QAfXiXN6eTbF/a3ZjsG6VB4JELqOugrS6Ix+NQ5Pz6ATGvKZt6WKSDnBRRS6P0hwSJ5goo9F54zLJxq5ZhYpVkNT1A4dAjZWlQHpBFCsZZs3wxbeV0pW99eCjfrn54KN+FzzCrpubron/QHN+e3L5IHyX6R1kUv4/xiCIQdTAMZq3AdjKWV/I4IdsBoTPa7NVh9nLmoBNARzzhflV0P9mVWs9r0/dv/E/J8sCFLXBv4+p3CwHyo9ai+/X3I8y+bIlL5wN2kVq8VbsQsWPA1WLTf8zhtNs5oHIT1VY6VC992mOfGC0QMNqoKVSpntlxxLM3UxxatbrO6fid/5XYoJ9iOZcy0KNmOhdBvym+GbX99wR/sZbMw6KmIfAX+iNyomjwPtY9Rrsr3gZbef84+TevPb3+wCaj81NXwKgD7zBaNf+OlI63u7r/mbnEefgW7xX4suadIFEsBfvWX9AzisRZ0=

Thanks!

<script setup>
import { ref } from 'vue'

const counter = ref(0)
const show = ref(false)

function showMore() {
  show.value = true
}

function reset () {
  counter.value = 0
  show.value = false
}
</script>

<template>
  <div>
    <div @click="counter++">
      counter: {{ counter }}
      <div v-show="!show">
        <button
          @click.stop="showMore()"
          @mousedown.stop="showMore()"
        >
          more...
        </button>
      </div>
      <div v-show="show">
        [ more info ]
      </div>
    </div>
    <button @click.stop="reset()">
      reset
    </button>
  </div>
</template>

[L0st1]

@click.self.stop="showMore()" is ok, but I don't know why@mousedown.self.stop="showMore()" is unuseful

[andrewspy]

@L0st1 @click.stop without @mousedown.stop would work also, but my intention is to trigger the "more" button with @mousedown instead of @click