Javascript DOM MouseEvent offsetX Property

Introduction

Click inside a DIV and output the coordinates of the click, relative to the DIV element: 

var x = event.offsetX;

The offsetX property returns the x-coordinate the mouse cursor, relative to the target element.

View in separate window 

<!DOCTYPE html>
<html>
<style>
div {border:1px solid red; height:300px;}
span {font-size:30px;}
</style>/*from w  w w  .  j  av a2  s  . c o m*/
<body>
<div onclick="myFunction(event)"></div>
<p>The x-coordinate, relative to the left edge of the DIV element is: <span id="demo"></span></p>

<script>
function myFunction(event) {
  var x = event.offsetX;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

The offsetX property returns the x-coordinate of the mouse pointer, relative to the target element.

To get the y-coordinate, use the offsetY property.

This property is read-only.

The offsetX property returns a Number representing the horizontal coordinate of the mouse pointer, in pixels.




PreviousNext

Related