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