Event Transparency API

From RuntimeWiki

Jump to: navigation, search



Event Transparency API Support

Detailed write-up


The event propagation mechanism built into browsers takes parent/child containment relationship into consideration. However, in a typical z-index stack, there could be multiple overlapping elements that are not in a containment relationship. Even if elements with higher z-index are not intended for event processing, they still receive/propagate events and thus obstruct lower z-index elements from receiving such events. To get around this, JavaScript developers have to write JavaScript code to calculate event targets and route such events, resulting expensive performance overhead for high frequency events.

At the recent OpenAjax F2F meeting, Alex Russell said that the critical feature is to pass events down to elements underneath from a top/down visual perspective, and not necessary to attempt more complicated solutions.

Why Is This Important?

Typical JavaScript-based UI widgets use multiple layered HTML DOM elements, positioned a z-index stack, to represent different facets of the widget. Some of such HTML DOM elements are purely for visual decoration purposes. These visual decorative elements sit in front of other elements in the z-index stack. Though the underlying elements are intended to process events, they do not receive events due to their lower z-indices. Developers have to write JavaScript to handle this manually.

One example is a popup dialog with drop shadow. The drop shadow is only for visual decorations. Events happen within this drop shadow are supposed to be processed by the dialog itself.

Another example is drag-and-drop. When implementing drag-and-drop, developers need to display visual helpers such as drag shadow, drop target gesture, and drag source gesture. Such visual helpers are not intended for event processing, which should be processed by the actual drag source and drop target objects. In implementations, Ajax libraries have to calculate the locations of all drop targets to enable dragging of the source with offset, resulting expensive hit box calculations.

Possible Solutions

A single JavaScript API extension that enables developers to tell the browser to pass through events to lower z-index elements.

Background material that request this feature


Jon Ferraiolo's comments

If the browsers implement SVG faithfully, they have to implement its 'pointer-events' property (http://www.w3.org/TR/SVG11/interact.html#PointerEventsProperty). This property has some of the semantics that Ajax toolkits require, particularly the notion that events can be passed through objects that are "above" (in the z-order sense) to other objects that lie "below" (in the z-order sense). I'm not sure how well this property maps onto HTML, or addresses the requirement above, but this SVG property perhaps would be informative to the people working at enhancing HTML to address this requirements.

Phase I Voting - Vote for Your Top 5 Features

NOTE: PHASE I VOTING IS NOW OPEN. (2008-04-01) We have now changed the voting procedure. Instead of putting votes on each separate wiki page, we are asking people to cast their Phase I Votes on the following wiki page:

Phase II Voting

More about this later.

Personal tools