Meituan-Dianping/mpvue · warning

Use "contextmenu" instead of "click.right" since right click

Error message

Use "contextmenu" instead of "click.right" since right clicks do not actually fire "click" events.

What it means

The template compiler's event-codegen detects `@click.right` (a `click` handler with the `.right` modifier). Right-clicks do not fire `click` events — they fire `contextmenu` — so the generated handler would never run; Vue warns and suggests using `@contextmenu` instead.

Source

Thrown at src/compiler/codegen/events.js:50

  left: genGuard(`'button' in $event && $event.button !== 0`),
  middle: genGuard(`'button' in $event && $event.button !== 1`),
  right: genGuard(`'button' in $event && $event.button !== 2`)
}

export function genHandlers (
  events: ASTElementHandlers,
  isNative: boolean,
  warn: Function
): string {
  let res = isNative ? 'nativeOn:{' : 'on:{'
  for (const name in events) {
    const handler = events[name]
    // #5330: warn click.right, since right clicks do not actually fire click events.
    if (process.env.NODE_ENV !== 'production' &&
      name === 'click' &&
      handler && handler.modifiers && handler.modifiers.right
    ) {
      warn(
        `Use "contextmenu" instead of "click.right" since right clicks ` +
        `do not actually fire "click" events.`
      )
    }
    res += `"${name}":${genHandler(name, handler)},`
  }
  return res.slice(0, -1) + '}'
}

function genHandler (
  name: string,
  handler: ASTElementHandler | Array<ASTElementHandler>
): string {
  if (!handler) {
    return 'function(){}'
  }

  if (Array.isArray(handler)) {

View on GitHub (pinned to 6c5d78ee04)

Solutions

1. Replace `@click.right="fn"` with `@contextmenu="fn"`.
2. Keep `@contextmenu.prevent="fn"` to suppress the native browser context menu.
3. If you need left vs right detection on a real click handler, inspect `event.button` inside the handler instead of using a modifier.

Example fix

// before
<div @click.right="openMenu" />
// after
<div @contextmenu.prevent="openMenu" />

// grep templates in CI for the unsupported modifier
// npx grep -rn "click\.right" src/ && exit 1 || true

function usesClickRight(templateSrc) {
  return /@click\.right|v-on:click\.right/.test(templateSrc);
}

When it happens

Trigger: Templates containing `@click.right` or `v-on:click.right`, typically written by developers expecting `.right` to filter for the right mouse button like `.prevent`/`.stop` style modifiers.

Common situations: Building custom context menus and guessing at the modifier syntax (there is no `.right` in Vue 2's event modifiers); copying `.right` from key-modifier analogues like `@keyup.right`.

Related errors

• v-on without argument expects an Object value
• v-bind without argument expects an Object or Array value
• invalid template option:${template}
• tag <${tag}> has no matching end tag.
• passive and prevent can't be used together. Passive handler

AI-assisted analysis of Meituan-Dianping/mpvue@6c5d78ee04 (2026-09-02). Data as JSON: /api/errors/8ea351e37cfc2684. Report an issue: GitHub.