Working with DOM

DG.DomEvent

Utility functions to work with the DOM events.

Functions

Function Returns Description
on( <HTMLElement> el, <String> types, <Function> fn, <Object> context? ) this Adds a listener function (fn) to a particular DOM event type of the element el. You can optionally specify the context of the listener (object the this keyword will point to). You can also pass several space-separated types (e.g. 'click dblclick').
on( <HTMLElement> el, <Object> eventMap, <Object> context? ) this Adds a set of type/listener pairs, e.g. {click: onClick, mousemove: onMouseMove}
off( <HTMLElement> el, <String> types, <Function> fn, <Object> context? ) this Removes a previously added listener function. If no function is specified, it will remove all the listeners of that particular DOM event from the element. Note that if you passed a custom context to on, you must pass the same context to off in order to remove the listener.
off( <HTMLElement> el, <Object> eventMap, <Object> context? ) this Removes a set of type/listener pairs.
stopPropagation( <DOMEvent> ev ) this Stop the given event from propagation to parent elements. Used inside the listener functions: 
DG.DomEvent.on(div, 'click', function (ev) {
    DG.DomEvent.stopPropagation(ev);
});
disableScrollPropagation( <HTMLElement> el ) this Adds stopPropagation to the element's 'mousewheel' events (plus browser variants).
disableClickPropagation( <HTMLElement> el ) this Adds stopPropagation to the element's 'click', 'doubleclick', 'mousedown' and 'touchstart' events (plus browser variants).
preventDefault( <DOMEvent> ev ) this Prevents the default action of the DOM Event ev from happening (such as following a link in the href of the a element, or doing a POST request with page reload when a <form> is submitted). Use it inside listener functions.
stop( <DOMEvent> ev ) this Does stopPropagation and preventDefault at the same time.
getMousePosition( <DOMEvent> ev, <HTMLElement> container? ) Point Gets normalized mouse position from a DOM event relative to the container or to the whole page if not specified.
getWheelDelta( <DOMEvent> ev ) Number Gets normalized wheel delta from a mousewheel DOM event, in vertical pixels scrolled (negative if scrolling down). Events from pointing devices without precise scrolling are mapped to a best guess of between 50-60 pixels.
addListener( … ) this Alias to DG.DomEvent.on
removeListener( … ) this Alias to DG.DomEvent.off

DG.DomUtil

Utility functions to work with the DOM tree.

Functions

Function Returns Description
get( <String|HTMLElement> id ) HTMLElement Returns an element given its DOM id, or returns the element itself if it was passed directly.
getStyle( <HTMLElement> el, <String> styleAttrib ) String Returns the value for a certain style attribute on an element, including computed values or values set through CSS.
create( <String> tagName, <String> className?, <HTMLElement> container? ) HTMLElement Creates an HTML element with tagName, sets its class to className, and optionally appends it to container element.
remove( <HTMLElement> el ) Removes el from its parent element
empty( <HTMLElement> el ) Removes all of el's children elements from el
toFront( <HTMLElement> el ) Makes el the last children of its parent, so it renders in front of the other children.
toBack( <HTMLElement> el ) Makes el the first children of its parent, so it renders back from the other children.
hasClass( <HTMLElement> el, <String> name ) Boolean Returns true if the element's class attribute contains name.
addClass( <HTMLElement> el, <String> name ) Adds name to the element's class attribute.
removeClass( <HTMLElement> el, <String> name ) Removes name from the element's class attribute.
setClass( <HTMLElement> el, <String> name ) Sets the element's class.
getClass( <HTMLElement> el ) String Returns the element's class.
setOpacity( <HTMLElement> el, <Number> opacity ) Set the opacity of an element. opacity must be a number from 0 to 1.
testProp( <String[]> props ) String|false Goes through the array of style names and returns the first name that is a valid style name for an element. If no such name is found, it returns false. Useful for vendor-prefixed styles like transform.
setTransform( <HTMLElement> el, <Point> offset, <Number> scale? ) Resets the 3D CSS transform of el so it is translated by offset pixels and optionally scaled by scale. Does not have an effect if the browser doesn't support 3D CSS transforms.
setPosition( <HTMLElement> el, <Point> position ) Sets the position of el to coordinates specified by position, using CSS translate or top/left positioning depending on the browser (used by Leaflet internally to position its layers).
getPosition( <HTMLElement> el ) Point Returns the coordinates of an element previously positioned with setPosition.
disableTextSelection() Prevents the user from generating selectstart DOM events, usually generated when the user drags the mouse through a page with text. Used internally by Leaflet to override the behaviour of any click-and-drag interaction on the map. Affects drag interactions on the whole document.
enableTextSelection() Cancels the effects of a previous DG.DomUtil.disableTextSelection.
disableImageDrag() As DG.DomUtil.disableTextSelection, but for dragstart DOM events, usually generated when the user drags an image.
enableImageDrag() Cancels the effects of a previous DG.DomUtil.disableImageDrag.
preventOutline( <HTMLElement> el ) Makes the outline of the element el invisible. Used internally by Leaflet to prevent focusable elements from displaying an outline when the user performs a drag interaction on them.
restoreOutline() Cancels the effects of a previous DG.DomUtil.preventOutline.

Properties

Property Type Description
TRANSFORM String Vendor-prefixed fransform style name (e.g. 'webkitTransform' for WebKit).
TRANSITION String Vendor-prefixed transition style name.

DG.PosAnimation

Used internally for panning animations, utilizing CSS3 Transitions for modern browsers and a timer fallback for IE6-9.

var fx = new DG.PosAnimation();
fx.run(el, [300, 500], 0.5);

Events

Event Data Description
start Event Fired when the animation starts.
step Event Fired continuously during the animation.
end Event Fired when the animation ends.

Methods

Method Returns Description
run( <HTMLElement> el, <Point> newPos, <Number> duration?, <Number> easeLinearity?) Run an animation of a given element to a new position, optionally setting duration in seconds (0.25 by default) and easing linearity factor (3rd argument of the cubic bezier curve, 0.5 by default).
stop() Stops the animation (if currently running).

Methods inherited from Evented

DG.Draggable

A class for making DOM elements draggable (including touch support). Used internally for map and marker dragging. Only works for elements that were positioned with DG.DomUtil.setPosition

var draggable = new DG.Draggable(elementToDrag);
draggable.enable();

Properties

Property Type Default Description
clickTolerance Number 3 The max number of pixels a user can shift the mouse pointer during a click for it to be considered a valid click (as opposed to a mouse drag).

Events

Event Data Description
down Event Fired when a drag is about to start.
dragstart Event Fired when a drag starts
predrag Event Fired continuously during dragging before each corresponding update of the element's position. Fired continuously during dragging.
dragend Event Fired when the drag ends.

Methods

Method Returns Description
enable() Enables the dragging ability.
disable() Disables the dragging ability.

Methods inherited from Evented