Passing event to DOM element underneath

I have developped this web application which uses Microsoft Seadragon Technology.

On top of the Seadragon viewport, the user can draw measurements and annotations. Those annotations are drawn into a Canvas on top of the Seadragon.

In order to be able to edit the annotation, my application has to be into "Edit Annotation" mode. What this mode does, it simply removes the CSS style pointer-events: none; from the annotation canvas. When this mode is off, I put back the pointer-events: none; to the annotation canvas so that the Seadragon viewport can receive the mouse events.

The problem I have is that the pointer-events property is not supported by IExplorer and Opera. Since the annotation canvas is drawn on top of the Seadragon viewport, in IExplorer9 and Opera, I can NEVER have the mouse event to reach the Seadragon Viewport.

I gave it a try by passing the mouseevent to the DOM element used to created the Seadragon viewport, but it does not seem to work.

$('#annotationCanvas').mousedown(function(){ $('#seadragonVP').trigger('mousedown'); });

But this does not work...

Can someone hel开发者_JAVA技巧p me on how to :

1. Either pass the mouse event to elements underneath another element
2. or to call directly the mouse events from Seadragon

You can have a look at the application at : http://fibics.interplex.ca

Thanks!