TGML Common Event Methods

The following is an overview of the methods that are common for all event objects:

Method Description
getCurrentTarget() Returns the element which the Script belongs to (i.e. the EventTarget whose EventListeners are currently being processed.)
getTarget() Returns the element to which the event was originally dispatched (for example, the element you clicked on).
preventDefault If the event is cancelable, preventDefault cancels the default action normally taken by the implementation (e.g. the viewer, see Remarks below).
stopPropagation()

Prevents further propagation of an event.

Event propagation occurs as nested elements or child elements receive an event before their parent elements. This is also referred to as event bubbling. To cease the upward propagation of events, use the stopPropagation() function.

 

Remarks

When an element contains Bind or Link, the viewer is supposed to respond (e.g. show a "change value" dialog or open the linked presentation object) when the user clicks on the element. This is the "default action" for the viewer which is canceled by the preventDefault function.

preventDefault in an OnMouseClick function cancels the change value dialog (when the element contains a Bind) or the link function (when the element contains a Link).

preventDefault in an OnSignalChange function cancels the error indication (the red cross).

Example of a common event method:

Copy
<TGML>
    <Component Left="99.5" Top="99.5" Width="101.0" Height="101.0" ContentHeight="l01.0" ContentWidth="101.0">

    <Script OnMouseDown="down"><![CDATA [
        function down(evt)
        {
            // The Rectangle will be the target since the Component 
            // has no painted (clickable) surface 
            var rectangle = evt.getTarget();

            // The Component is the current target because 
            // it is the immediate parent of 
            // the Script (i.e. the executed event listener)
            var component = evt.getCurrentTarget();
        }
    ]]></Script>

    <Rectangle Left="0.5" Top="0.5" Width="100.0" Height="100.0" Fill="#FFFFFF" Stroke="#000000"/>

    </Component>
</TGML>