我正在尝试在我预先确定的某个区域内显示鼠标的坐标，这些区域正在使用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);
}
问题又回到未关闭的div标签上，您可以看到它 https://jsfiddle.net/smaha/bajdmyhn/26/工作的链接
<div id="vue-app">
<div id="canvas" v-on:mousemove="XYcoordinates">
{{x}},{{y}}
</div>
</div>