How can I use jQuery to programmatically click at a specific XY position on a particular div?

Question

I have two divs that completely overlap. The top div is a partially transparent HTML5 canvas, and parts that are not transparent interact with mouse hangs, clicks, scrolling, etc.

Below is a map (using a flyer), and in a similar way it should interact with freezes, clicks, scrolls, etc.

I can register a click in both divs, having the code as follows:

$("#canvas").click(function(e){ $('#map').click(); } 

However, for my application to work correctly, the click event (and all other mouse events) must be logged in the same XY position.

All I really need to do is pass e.pageX and e.pageY to the new click function since the two divs are completely overlapping (AKA are identical to the 4 corners) - however, I'm not sure how to do this. Using jQuery (or any other alternative methods), how can I register a click at a specific XY position in the #map div?

Answer 1

  // Create a new jQuery.Event object with specified event properties. var e = jQuery.Event("click", { pageX: pageX, pageY: pageY }); // trigger an artificial keydown event with keyCode 64 jQuery("#map").trigger( e ); 

This would "register a click at a specific XY position in div #map".