1

Según entiendo cuando disparo un click sobre una posición de la pantalla (x,y) se hará click sobre todo el elemento que se encuentra en esa posición. Mi pregunta sería la siguiente: teniendo en cuenta que conozco de antemano el ancho de un elemento, mediante jquery, ¿puedo hacer click en una posición del ancho del mismo?

Por ejemplo: tengo un elemento que mide 300px de ancho, quiero hacer click en la posición 150px del mismo.

¿Esto es posible?

Gracias de antemano.

2 respuestas 2

2

Con JavaScript puedes recuperar el elemento que se encuentra en una posición determinada con document.elementFromPoint y lanzar el evento click. Estas posiciones son absolutas pero es un buen punto de partida:

document.elementFromPoint(x, y).click();

Teniendo esa función y sabiendo el elemento sobre el que quieres realizar el click podrías realizar algunos cálculos para poder recuperar la posición absoluta partiendo de la posición relativa sobre la que quieres hacer click. Esto lo podemos hacer con la función getBoundingClientRect que nos devuelve el rectángulo que forma el elemento con sus 4 vértices.

var elemento = document.getElementById('idDelElemento');
var rect = elemento.getBoundingClientRect();
//rect.top, rect.right, rect.bottom, rect.left
var clickX = rect.left + 100; //Posición absoluta de 100px a la derecha del extremo izquierdo del elemento.
var clickY = rect.top + 50; //Posición absoluta de 50px hacia abajo del extremo superior del elemento.
document.elementFromPoint(clickX, clickY).click();

EDITADO:

En base a los comentarios, se busca el modo de poder emular el click en la posición concreta y no simplemente en el elemento en cuestión. Para ello, el único modo que se ocurre es crear un evento de ratón y luego procesarlo. Esta funcionalidad está desaconsejada y retirada de los Web Standars, no obstante, modifico el código de la solución adicional para ilustrar cómo sería el funcionamiento de la siguiente forma:

var elemento = document.getElementById('idDelElemento');
var rect = elemento.getBoundingClientRect();
//rect.top, rect.right, rect.bottom, rect.left
var clickX = rect.left + 100; //Posición absoluta de 100px a la derecha del extremo izquierdo del elemento.
var clickY = rect.top + 50; //Posición absoluta de 50px hacia abajo del extremo superior del elemento.
var eventoClick= document.createEvent('MouseEvents'); //Creamos un nuevo evento
eventoClick.initMouseEvent('click', true, true, window, 0, 0, 0, clickX, clickX, false, false, false, false, 0, null); //Inicializamos el evento 
document.dispatchEvent(eventoClick); //Lanzamos el evento sobre el documento

Utilizamos document para evitar lanzar el evento en base a un elemento concreto concreto y lo lanzamos directamente sobre el documento. Recomiendo encarecidamente que se revise la documentación de initMouseEvent para entender el uso de todos los parámetros del evento.

Hay que tener en cuenta que si no necesitas recuperar el elemento o no es una posición relativa a un elemento se puede utilizar el mismo método pero utilizando los valores para clickX y clickY que necesites.

3
  • Si uso: document.elementFromPoint(clickX, clickY).click(); Al disparar el click lo hará sobre todo el elemento y lo que trato de disparar es sólo una parte del mismo, por ejemplo, imagina que es una barra de navegación de un vídeo, la intención es que la función final dispare sólo esa parte concreta del elemento (por ejemplo la zona de la mitad del vídeo) ya que por detrás hay un reproductor JS. Commented el 1 may. 2017 a las 10:05
  • @RonnieEsponja he realizado una edición sobre la respuesta para dar soporte a la posibilidad de no lanzar el evento sobre un elemento en una posición determinada, sino simplemente lanzarlo sobre una posición dada.
    – frikinside
    Commented el 1 may. 2017 a las 11:35
  • Justo encontré la solución en la comunidad inglesa pero tu explicación en español es mucho más clara. Gracias! Commented el 1 may. 2017 a las 12:46
0

Puedes incluir dentro del elemento de 300px otro en la posición que quieres y aplicarle el evento al de 150px.

Ejemplo:

function hazAlgo(ev) {
    //Evitamos que el evento se dispare
    // hacia otros elementos cercanos.
    ev.stopImmediatePropagation();
    window.alert("Has hecho click");
}
$("#elementoClick").on("click", hazAlgo);
.elemento300 {
  width: 300px;
  height: 300px;
  border: 1px solid orange;
}

.elementoClick {
  width: 50px;
  height: 50px;
  margin-left: 150px;
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="elemento300">
  <div id="elementoClick" class="elementoClick"></div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.