diff --git a/src/compiler/codegen/events.js b/src/compiler/codegen/events.js index a6cf166d528..1b59fa0147d 100644 --- a/src/compiler/codegen/events.js +++ b/src/compiler/codegen/events.js @@ -34,10 +34,25 @@ const modifierCode: { [key: string]: string } = { right: genGuard(`'button' in $event && $event.button !== 2`) } -export function genHandlers (events: ASTElementHandlers, native?: boolean): string { +export function genHandlers ( + events: ASTElementHandlers, + native: boolean, + warn: Function +): string { let res = native ? 'nativeOn:{' : 'on:{' for (const name in events) { - res += `"${name}":${genHandler(name, events[name])},` + 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) + '}' } diff --git a/src/compiler/codegen/index.js b/src/compiler/codegen/index.js index 1a2eb6b47ed..92cde3fca34 100644 --- a/src/compiler/codegen/index.js +++ b/src/compiler/codegen/index.js @@ -205,10 +205,10 @@ function genData (el: ASTElement): string { } // event handlers if (el.events) { - data += `${genHandlers(el.events)},` + data += `${genHandlers(el.events, false, warn)},` } if (el.nativeEvents) { - data += `${genHandlers(el.nativeEvents, true)},` + data += `${genHandlers(el.nativeEvents, true, warn)},` } // slot target if (el.slotTarget) { diff --git a/test/unit/features/directives/on.spec.js b/test/unit/features/directives/on.spec.js index 10f99b91587..a95a3b6406c 100644 --- a/test/unit/features/directives/on.spec.js +++ b/test/unit/features/directives/on.spec.js @@ -4,13 +4,16 @@ describe('Directive v-on', () => { let vm, spy, el beforeEach(() => { + vm = null spy = jasmine.createSpy() el = document.createElement('div') document.body.appendChild(el) }) afterEach(() => { - document.body.removeChild(vm.$el) + if (vm) { + document.body.removeChild(vm.$el) + } }) it('should bind event to a method', () => { @@ -548,4 +551,13 @@ describe('Directive v-on', () => { triggerEvent(vm.$refs.input, 'keydown', e => { e.keyCode = 13 }) expect(prevented).toBe(true) }) + + it('should warn click.right', () => { + new Vue({ + template: `
`, + methods: { foo () {} } + }).$mount() + + expect(`Use "contextmenu" instead`).toHaveBeenWarned() + }) })