4

I have two divs that overlap each other completely. The div above is a partially transparent HTML5 canvas, and the parts that are not transparent interact with mouse hovers, clicks, scrolls, etc.

The div below has a map (using leaflet), and similarly it is supposed to interact with hovers, clicks, scrolls, etc.

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

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

However, in order for my app to work properly, the click event (and all other mouse events) need to register in the identical X-Y position.

All I really need to do is pass e.pageX and e.pageY over to the new click function, since the two divs overlap completely (AKA identical 4 corners) - however I am unsure how to do this. Using JQuery (or any other alternative means), how can I register a click in a specific X-Y position in the div #map?

thisissami
  • 15,445
  • 16
  • 47
  • 74
  • 1
    why don't you try instead raising a custom event that handles all operations that need to be synchronized, instead of artifically raising user events? – Jorge Alvarado Nov 17 '12 at 23:21
  • How would I go about doing that? Is that what Sidharth Mudgal refers to below or something different? – thisissami Nov 17 '12 at 23:59
  • Did you see [this answer](http://stackoverflow.com/a/2845199/551322) to similar problem? It seems that your only option is to change change event handlers and follow suggestion from @JorgeAlvarado. – nrodic Nov 18 '12 at 00:15
  • 1
    so that answer (which is essentially the same as Sidharth's answer below) doesn't work for me... the click event is only being registered as being in the (0,0) coordinate. I'm guessing this may have to do with the way leaflet is implemented... i'll look into that and update here if I figure it out. – thisissami Nov 18 '12 at 00:27

1 Answers1

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 in a specific X-Y position in the div #map".

Sidharth Mudgal
  • 4,234
  • 19
  • 25