Can I disable every Mouse Interaction with a canvas to interact with underlying Objects?

Question

Let's say I have a graphical effect that I want to be overlaying HTML-Text. This Element shouldn't interfere with the usability of the site, it wouldn't have any interactive purpose. Is it possible to disable all Mouse Interaction on a certain html-object, for example on a canvas, so that I could still interact (klick on links, select text, ...) with the underlying objects?

that would be great!

Answer 1

Using the pointer-events:none CSS property (implemented first in SVG, on its way to HTML) allows you to turn off hit detection for an element.

This is non-standard as of this writing and only supported in a subset of browsers. (Firefox and Safari/Chrome, but not Opera or IE.) Other than this, there is no way to do this.

Here's the in-progress CSS3 reference for this property.

See also this question: CSS pointer-events property alternative for IE.