He estado intentando simular mediante programación un clic del mouse en coordenadas arbitrarias en un elemento de lienzo. Debido a las limitaciones tecnológicas, necesito evitar jQuery, lo que facilitaría las cosas.
Con esta respuesta, puedo obtener las coordenadas de los clics manuales.
Usando esta respuesta, puedo simular mediante programación un clic del mouse. Pero desafortunadamente necesito des-jQuery-ify, que es, creo, donde me he encontrado con problemas.
Si trato de hacer algo como:
document.querySelector("canvas").dispatchEvent(new Event("mousedown", {pageX: 1, pageY: 1}));o
document.querySelector("canvas").dispatchEvent(new MouseEvent("mousedown", {pageX: 1, pageY: 1}));o combinaciones de los anteriores usando 'clic' en lugar de 'mousedown'
Todavía obtengo errores extraños 'indefinidos' que no entiendo (aparte de eso, puedo ver que se refieren a 'mousedown') y nunca simulo con éxito el clic.
Algunos ejemplos de trabajo (y no trabajo):
Trabajando: Muestra las coordenadas de los clics
Trabajando: dispara un clic programático
No funciona: combinando los dos anteriores
No funciona: Intentando disparar un clic programático sin jQuery
El problema con su enfoque de jQuery es que lo está mezclando con un detector de eventos de JavaScript simple. Esto no funciona con jQuery.
Si desea activar un evento y escucharlo usando jQuery, debe usar sus .trigger() y .mousedown() .
Aquí hay un ejemplo:
function getMousePosition(canvas, event) { let rect = canvas.getBoundingClientRect(); let x = event.clientX - rect.left; let y = event.clientY - rect.top; document.getElementById('output').innerText = x + ", " + y; } canvasElem = document.querySelector("canvas"); $('#canvas_element').mousedown(function(e) { getMousePosition(canvasElem, e); }); var e = jQuery.Event("mousedown", { clientX: 50, clientY: 50 }); $('#canvas_element').trigger(e); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <canvas id="canvas_element"></canvas> <div id="output"></div>Todo lo anterior se puede hacer usando solo JavaScript, por supuesto.
function getMousePosition(canvas, event) { let rect = canvas.getBoundingClientRect(); let x = event.clientX - rect.left; let y = event.clientY - rect.top; document.getElementById('output').innerText = x + ", " + y; } canvasElem = document.querySelector("canvas"); canvasElem.addEventListener("mousedown", function(e) { getMousePosition(canvasElem, e); }); canvasElem.dispatchEvent(new MouseEvent("mousedown", { clientX: 50, clientY: 50 })); <canvas id="canvas_element"></canvas> <div id="output"></div>