limit mouse event modifiers to mouse events

Author: yyx990803

src/compiler/codegen/events.js

@@ -19,7 +19,11 @@ const keyCodes = {
 const modifierCode = {
   stop: '$event.stopPropagation();',
   prevent: '$event.preventDefault();',
-  self: 'if($event.target !== $event.currentTarget)return;',
+  self: 'if($event.target !== $event.currentTarget)return;'
+}
+
+const isMouseEventRE = /^mouse|^pointer|^(click|dblclick|contextmenu|wheel)$/
+const mouseEventModifierCode = {
   ctrl: 'if(!$event.ctrlKey)return;',
   shift: 'if(!$event.shiftKey)return;',
   alt: 'if(!$event.altKey)return;',
@@ -29,28 +33,32 @@ const modifierCode = {
 export function genHandlers (events: ASTElementHandlers, native?: boolean): string {
   let res = native ? 'nativeOn:{' : 'on:{'
   for (const name in events) {
-    res += `"${name}":${genHandler(events[name])},`
+    res += `"${name}":${genHandler(name, events[name])},`
   }
   return res.slice(0, -1) + '}'
 }
 
 function genHandler (
+  name: string,
   handler: ASTElementHandler | Array<ASTElementHandler>
 ): string {
   if (!handler) {
     return 'function(){}'
   } else if (Array.isArray(handler)) {
-    return `[${handler.map(genHandler).join(',')}]`
+    return `[${handler.map(handler => genHandler(name, handler)).join(',')}]`
   } else if (!handler.modifiers) {
     return fnExpRE.test(handler.value) || simplePathRE.test(handler.value)
       ? handler.value
       : `function($event){${handler.value}}`
   } else {
     let code = ''
     const keys = []
+    const isMouseEvnet = isMouseEventRE.test(name)
     for (const key in handler.modifiers) {
       if (modifierCode[key]) {
         code += modifierCode[key]
+      } else if (isMouseEvnet && mouseEventModifierCode[key]) {
+        code += mouseEventModifierCode[key]
       } else {
         keys.push(key)
       }

test/unit/modules/compiler/codegen.spec.js

@@ -248,7 +248,7 @@ describe('codegen', () => {
     )
   })
 
-  it('generate events with modifiers', () => {
+  it('generate events with generic modifiers', () => {
     assertCodegen(
       '<input @input.stop="onInput">',
       `with(this){return _h('input',{on:{"input":function($event){$event.stopPropagation();onInput($event)}}})}`
@@ -261,21 +261,24 @@ describe('codegen', () => {
       '<input @input.self="onInput">',
       `with(this){return _h('input',{on:{"input":function($event){if($event.target !== $event.currentTarget)return;onInput($event)}}})}`
     )
+  })
+
+  it('generate events with mouse event modifiers', () => {
     assertCodegen(
-      '<input @input.ctrl="onInput">',
-      `with(this){return _h('input',{on:{"input":function($event){if(!$event.ctrlKey)return;onInput($event)}}})}`
+      '<input @click.ctrl="onClick">',
+      `with(this){return _h('input',{on:{"click":function($event){if(!$event.ctrlKey)return;onClick($event)}}})}`
     )
     assertCodegen(
-      '<input @input.shift="onInput">',
-      `with(this){return _h('input',{on:{"input":function($event){if(!$event.shiftKey)return;onInput($event)}}})}`
+      '<input @click.shift="onClick">',
+      `with(this){return _h('input',{on:{"click":function($event){if(!$event.shiftKey)return;onClick($event)}}})}`
     )
     assertCodegen(
-      '<input @input.alt="onInput">',
-      `with(this){return _h('input',{on:{"input":function($event){if(!$event.altKey)return;onInput($event)}}})}`
+      '<input @click.alt="onClick">',
+      `with(this){return _h('input',{on:{"click":function($event){if(!$event.altKey)return;onClick($event)}}})}`
     )
     assertCodegen(
-      '<input @input.meta="onInput">',
-      `with(this){return _h('input',{on:{"input":function($event){if(!$event.metaKey)return;onInput($event)}}})}`
+      '<input @click.meta="onClick">',
+      `with(this){return _h('input',{on:{"click":function($event){if(!$event.metaKey)return;onClick($event)}}})}`
     )
   })