La propiedad MouseEvent offsetX es una propiedad de solo lectura que se usa para devolver la coordenada x del puntero del mouse , en relación con el elemento de destino.
Sintaxis:
event.offsetX
Valor devuelto: Devuelve un número que representa la coordenada horizontal del puntero del ratón, en píxeles.
El siguiente programa ilustra la propiedad MouseEvent offsetX:
Ejemplo: averiguar la coordenada horizontal del puntero del mouse en relación con un elemento <div> .
html
<!DOCTYPE html>
<html>
<head>
<title>MouseEvent offsetX Property in HTML</title>
<style>
div {
border: 3px solid green;
height: 100px;
width: 500px;
}
h1 {
color: green;
}
h2 {
font-family: Impact;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>MouseEvent offsetX Property</h2>
<p>Click inside the green box to get
the x-coordinate relative to the top edge.</p>
<div onclick="coord(event)"></div>
<p>The x-coordinate, relative to
the top edge of the DIV element is:
<span id="test"></span></p>
<script>
function coord(event) {
var c = event.offsetX;
document.getElementById(
"test").innerHTML = c;
}
</script>
</body>
</html>
Producción:
- Después de hacer clic en el botón:
- Después de hacer clic en el botón:
Navegadores compatibles:
- Ópera 12.1 y superior
- Internet Explorer 9 y superior
- Google Chrome 1 y superior
- Borde 12 y superior
- Firefox 39 y superior
- Apple Safari 1 y superior
Publicación traducida automáticamente
Artículo escrito por Shubrodeep Banerjee y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA