Question

I have an square image depicting a car on a transparent background. I want to be able to click on car, yet when I click on it’s transparent background I’d like the click to go through the image and trigger on the underlying DOM element (or, specifically, other image).

Can that be achieved somehow?

Answer 1

That’s quite complex, but can be achieved by combining Pointer events to allow for the click to bubble up the DOM (reaching the img parent container), and a faux Canvas on top to detect a transparent pixel (which will be used as a flag to activate the event delegation).

Pointer events were derived from the SVG model to allow for event delegation across layers. Note that they’re currently not supported on IE and Opera.

Related Posts:

• A technique used for pixel color detection
• Get pixel from an HTML5 Canvas

Demo:

• pointer-events on jsFiddle

Reference:

• pointer-events on Mozilla Developer Network
• Pixel based manipulation on Dev.Opera

Further Read:

• An article on the subject by Robert Nyman
• John Resig on transforming image data