Currently, my canvas application does not have a built-in zoom and pan feature.
To work around this limitation, I have created an overlay on top of the canvas with pointer-events: all and opacity: 0, allowing users to zoom and pan seamlessly.
However, I am facing a challenge in delegating a click from the overlay to the canvas. In my attempt to simulate a click by capturing touch-click coordinates and triggering it again with pointer-events: none, I have encountered issues.
$(document).on('touchstart', function (event) {
showCoordinates(event);
});
function showCoordinates(event) {
var x = event.touches[0].clientX;
var y = event.touches[0].clientY;
console.log(x);
console.log(y);
$('#overlay').css('pointer-events','none');
var myEvent = $.Event( "touchstart", { pageX:x, pageY:y } );
$("body").trigger(myEvent);
$('#overlay').css('pointer-events','all');
}
The major issue lies in the part where I try to simulate the click action:
var myEvent = $.Event( "touchstart", { pageX:x, pageY:y } );
$("body").trigger(myEvent);
This approach is failing even when tested in Google Chrome's console. What could be the mistake in my implementation?