Currently, I am working on a project where I need the offsetX and offsetY coordinates to be displayed in percentage (%) format while hovering over a div element. By default, these coordinates are shown in pixels.
Here is an example of the structure:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Events</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<div id="vue-events">
<h1>Events in VueJS</h1>
<div id="canvas" v-on:mousemove="updateXY">
<img src="img/img-1.jpg" style="visibility: hidden;" />
{{x}}, {{y}}
</div>
</div>
<script src="js/events.js"></script>
</body>
</html>
Below is the script used for handling events:
new Vue({
el: '#vue-events',
methods:{
updateXY: function(event){
this.x = event.offsetX;
this.y = event.offsetY;
}
}
});