Vue.js - マウスイベント修飾子

Question

私はVue.jsアプリを持っています。このアプリでは、左、中、右のmouse modifiersを使いたいです。私はこのFiddleに示されているように左修飾子を正常に動作させることができました。しかし、middleまたはright修飾子を使用することはできません。そのフィドルのコードは次のようになります：

<div id="myApp"> 
    <div id="myCanvas" v-on:click.left="onLeftClick" v-on:click.middle="onMiddleClick" v-on:click.right="onRightClick"> 

    </div> 

    <br /> 
    <textarea v-model="log" rows="6"></textarea> 
</div> 

... 

new Vue({ 
    el: '#myApp', 
    data: { log:'' }, 

    created: function() { 
    this.log = 'App Started\n'; 
    }, 

    methods: {  
    onLeftClick: function(e) { 
     this.log += 'Left Button Clicked\n'; 
    }, 

    onMiddleClick: function(e) { 
     this.log += 'Middle Button Clicked\n'; 
    }, 

    onRightClick: function(e) { 
     this.log += 'Right Button Clicked\n';  
    } 
    } 
}) 

私は何が欠けていますか？誰かがmyCanvasエリアで右クリックすると、小さなメニューカスタムをアプリにポップアップしたいと思います。しかし、フィドルに見られるように、middleまたはright修飾子のイベントハンドラを起動することさえできません。私は間違って何をしていますか？私は何が欠けていますか？

Answer 1

これは興味深いことです。中央のボタンは私のために動作しますが、右クリックはしていませんし、あなただけの代わりにそれを使用できるように、私はなぜわかりませんが、理論的にはrightマウス修飾子はちょうどcontextmenuの別名でなければなりません：

<div id="myCanvas" v-on:click.left="onLeftClick" v-on:click.middle="onMiddleClick" v-on:contextmenu.prevent="onRightClick"> 

ここにJSFiddleがあります：https://jsfiddle.net/pwmrgx6w/