{"record":{"id":"8ea351e37cfc2684","repo":"Meituan-Dianping/mpvue","slug":"use-contextmenu-instead-of-click-right-since-r-8ea351","errorCode":null,"errorMessage":"Use \"contextmenu\" instead of \"click.right\" since right clicks do not actually fire \"click\" events.","messagePattern":"Use \"contextmenu\" instead of \"click\\.right\" since right clicks do not actually fire \"click\" events\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"src/compiler/codegen/events.js","lineNumber":50,"sourceCode":"  left: genGuard(`'button' in $event && $event.button !== 0`),\n  middle: genGuard(`'button' in $event && $event.button !== 1`),\n  right: genGuard(`'button' in $event && $event.button !== 2`)\n}\n\nexport function genHandlers (\n  events: ASTElementHandlers,\n  isNative: boolean,\n  warn: Function\n): string {\n  let res = isNative ? 'nativeOn:{' : 'on:{'\n  for (const name in events) {\n    const handler = events[name]\n    // #5330: warn click.right, since right clicks do not actually fire click events.\n    if (process.env.NODE_ENV !== 'production' &&\n      name === 'click' &&\n      handler && handler.modifiers && handler.modifiers.right\n    ) {\n      warn(\n        `Use \"contextmenu\" instead of \"click.right\" since right clicks ` +\n        `do not actually fire \"click\" events.`\n      )\n    }\n    res += `\"${name}\":${genHandler(name, handler)},`\n  }\n  return res.slice(0, -1) + '}'\n}\n\nfunction genHandler (\n  name: string,\n  handler: ASTElementHandler | Array<ASTElementHandler>\n): string {\n  if (!handler) {\n    return 'function(){}'\n  }\n\n  if (Array.isArray(handler)) {","sourceCodeStart":32,"sourceCodeEnd":68,"githubUrl":"https://github.com/Meituan-Dianping/mpvue/blob/6c5d78ee04f58c6d782c456dfcf0fe63c0b7f89b/src/compiler/codegen/events.js#L32-L68","documentation":"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.","triggerScenarios":"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.","commonSituations":"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`.","solutions":["Replace `@click.right=\"fn\"` with `@contextmenu=\"fn\"`.","Keep `@contextmenu.prevent=\"fn\"` to suppress the native browser context menu.","If you need left vs right detection on a real click handler, inspect `event.button` inside the handler instead of using a modifier."],"exampleFix":"// before\n<div @click.right=\"openMenu\" />\n// after\n<div @contextmenu.prevent=\"openMenu\" />","handlingStrategy":"validation","validationCode":"// grep templates in CI for the unsupported modifier\n// npx grep -rn \"click\\.right\" src/ && exit 1 || true","typeGuard":"function usesClickRight(templateSrc) {\n  return /@click\\.right|v-on:click\\.right/.test(templateSrc);\n}","tryCatchPattern":null,"preventionTips":["Use @contextmenu (plus .prevent) for right-click handling.","Check event.button in handlers when button discrimination is needed.","Add a lint/CI grep rule banning click.right in templates."],"tags":["vue","events","compiler","template","dev-warning"],"backgroundTag":"click-right-modifier-unsupported","analyzedSha":"6c5d78ee04f58c6d782c456dfcf0fe63c0b7f89b","analyzedAt":"2026-09-02T05:17:40.946Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-09T11:17:12.671Z"}