我正在尝试在我预先确定使用 div 的某个区域内显示鼠标的坐标。当我查看 chrome 控制台而不是我的网页时，当我在 div 内移动鼠标时，我能够看到坐标动态变化。
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Mouse Coordinates</title>
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="vue-app">
<div id="canvas" v-on:mousemove="XYcoordinates">
{{x}},{{y}}
<div>
</div>
<script src="app.js"></script>
</body>
</html>
//App.js file
// this is a Vue instance
new Vue({
el:'#vue-app',
// data object
data:{
x:0,
y:0
},
methods:{
XYcoordinates: function(event){
console.log(event);
this.x = event.offsetX;
this.y = event.offsetY;
}
}
});
#canvas{
width:600px;
padding: 200px 20px;
text-align: center;
border: 3px solid rgb(228, 0, 0);
}