warn click.right (close vuejs#5330)

Author: yyx990803

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) + '}'
 }

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) {

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: `<div @click.right="foo"></div>`,
+      methods: { foo () {} }
+    }).$mount()
+
+    expect(`Use "contextmenu" instead`).toHaveBeenWarned()
+  })
 })