VueJSでマウス座標を取得する方法

v-on:click="someMethod"でトリガーされたコンポーネントがあります。VueJSでマウス座標を取得する方法

このクリックのマウス座標（X、Y）はどのように取得できますか？

追加情報：あなたのようなHTML5 Canvasコンポーネント

2017-08-07 Luiz

Vueはメソッドの最初のパラメータとしてeventを渡します。パラメータの場合は、代わりにthisを使用します。someMethod（param1、param2、event）

methods: { 
    someMethod(event) { 
     // clientX/Y gives the coordinates relative to the viewport in CSS pixels. 
     console.log(event.clientX); // x coordinate 
     console.log(event.clientY); // y coordinate 

     // pageX/Y gives the coordinates relative to the <html> element in CSS pixels. 
     console.log(event.pageX); 
     console.log(event.pagey); 

     // screenX/Y gives the coordinates relative to the screen in device pixels. 
     console.log(event.screenX); 
     console.log(event.screenY); 
    } 
}

出典

2017-08-07 18:14:16 kevguy

は、任意のイベントハンドラ

new Vue({ 
    el: '#element', 
    methods: { 
    someMethod: function (event) { 
     var x = event.pageX; 
     var y = event.pageY; 
    } 
    } 
})

にclientXとscreenXもありますでしょう、彼らはビューポート、スクリーンまたはレンダリングされた内容に基づいて、多少異なる結果を返します。

出典

2017-08-07 18:12:24 adeneo

VueJSでマウス座標を取得する方法

答えて

関連する問題