0

I've a canvas in foreground in order to be able to draw above my page.

Since my canvas is in foreground, it catches all events and I can't interact with any elements in the DOM.

For a simple click, I success to catch the event and dispatch it to the element behind the canvas doing: 

var _dispatchEvent = function(e) {
  newEvent = new e.constructor(e.type, e);
  this.div.style.display = 'none';
  document.elementFromPoint(e.pageX, e.pageY).dispatchEvent(newEvent);
  this.div.style.display = 'block';
};

*I bound _dispatchEvent with all kind of events*

This work pretty well with links, checkbox, or radio. However it doesn't work for example with a select element because the event 'select' can't be triggered on a canvas element.

Looking for another solution, do you have any idea of how I could draw above the dom (using canvas or something else) and still be able to interact with it ?

Luc
  • 81
  • 1
  • 2
  • 2
    There are a couple of neat ways to do this. See this SO question: http://stackoverflow.com/questions/1401658/html-overlay-which-allows-clicks-to-fall-through-to-elements-behind-it – Ziggy Mar 03 '14 at 16:05
  • As @Ziggy linked, use pointer-events to disable event listening on the canvas. IE<11 doesn't support pointer-events, so if you want to support IE<11 an awkward redesign is required (or just don't have the overlaying canvas if pointer-events is not available on that user's browser). – markE Mar 03 '14 at 21:06

0 Answers0