It’s always nice when a basic shared idea with a simple proof of concept becomes something concrete, usable, and well explained. This is the case with Shea Frederick’s post titled Forwarding Mouse Events Through Layers.

The aim of the technique is to provide an ExtJS plug-in that can capture dragged and dropped data from external sources, such as a spreadsheet, in order to easily import data inside a generic Ext.grid.GridPanel.

The textarea (my masking element) that is positioned over the grid receives mouseover, mousemove, mousedown , mouseup and other events.

The top masking layer is hidden for a moment, so we can figure out what element is below the mask at the event location.

The event is re-fired – this is where the W3 DOM Event model and the simpler Microsoft equivalent come into play.

Start the process again – ready for the next event.

The method used to understand which element is supposed to be the event target is document.elementFromPoint, also compatible with IE, Mozilla, WebKit, and Opera.

The technique does not necessarily need the ExtJS library but this demo shows a live Ext Grid example.

Go to Source