EventPropogation Raphaeljs

Question

Here is the scenario I have.

• There is an image in img tag. There is an svg tag created by Raphael.
• This svg tag is directly under the body tag. svg tag and img tag do not share a single parent. svg overlays on img because of the absolute coordinates on SVG.
• All myshapes are transparent and have event handlers.
• img tag has event handlers.
• When i click, the raphael events are fired but the img event handlers aren't.

How can I enable event propagation from Raphael's SVG to img tag.

Answer 1

Here is how I solved it, I am also linking a couple of very nice posts that talk about this in detail.

triggering-a-javascript-click-event-at-specific-coordinates

forwarding-mouse-events-through-layers

raphaeljs-creating-click-through-elements

$('svg').click(function(e){
   var event = new jQuery.Event("click");
   event.pageX = e.pageX;
   event.pageY = e.pageY;
   $("#elem").trigger(event);
   console.log("============");
});