Question

My absolutely positioned canvas elements are blocking all the mouse events so that nothing underneath them can be clicked, same problem mentioned here and here.

I have multiple canvas layers that need to be at specific z-index’s so I need to forward mouse events through the canvases. pointer-events: none; works in good browsers, but for IE9 I need javascript to do it, here is my current solution,

 var evts = [ 'click', 'mousedown', 'mouseup', 'dblclick'],
                canvases = $('canvas');

            $.each(evts, function(_, event){
                canvases.bind(event, function(evt){
                    var target,
                        pEvent;
                    $(this).hide();
                    target = document.elementFromPoint(evt.clientX, evt.clientY); 
                    $(this).show();
                    pEvent = $.Event(event);
                    pEvent.target = target;
                    pEvent.data = evt.data;
                    pEvent.currentTarget = target;
                    pEvent.pageX = evt.pageX;
                    pEvent.pageY = evt.pageY;
                    pEvent.result = evt.result;
                    pEvent.timeStamp = evt.timeStamp;
                    pEvent.which = evt.which;
                    $(target).trigger(event, pEvent);
                 });
            });   

Working example,
jsFiddle

Questions;

1. I’m creating the new event and passing over the relevant data, would it be safe to pass the evt var with the target and currentTarget modified?

2. How can I propogate a right click?

Or does anyone have a better way to accomplish this? The other related questions are quite old.

Answer 1

There’s no clean way to pass the events cross-browser. You can pass the (modified) event on but you can’t guarantee that it will work as it might have naturally, especially cross-browser.

For right click using your code just do this: http://jsfiddle.net/6WMXh/20/

(you half used the jquery extra info part but never did anything with it)