Friday, October 2nd, 2009

Hide and Seek via Mouse

Category: Sencha, UI

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.

  1. The textarea (my masking element) that is positioned over the grid receives mouseover, mousemove, mousedown , mouseup and other events.
  2. The top masking layer is hidden for a moment, so we can figure out what element is below the mask at the event location.
  3. The event is re-fired – this is where the W3 DOM Event model and the simpler Microsoft equivalent come into play.
  4. 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.

Posted by webreflection at 6:30 am

4.3 rating from 63 votes


Comments feed TrackBack URI

Looks great! Surprised IE actually plays nicely with this — wish that function return a list of DOM elements present at that given point, though. Wonder if that’s possible.

Comment by mdmadph — October 2, 2009

@mdmadph – if you needed a list of the elements at a given point, you could use the same concept used here, and just keep going until you hit the body element.

Comment by VinylFox — October 2, 2009

In Firefox and WebKit, the pointer-events css property exists for this purpose

Comment by parsap — October 5, 2009

The pointer-events CSS property is part of the SVG spec, so the fact that works in other situations im just going to attribute to luck.

Either way, I need to code for all browsers, not just a couple.

Comment by VinylFox — October 16, 2009

Leave a comment

You must be logged in to post a comment.