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.
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)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With