Working with DOM
DG.DomEvent
Utility functions to work with the DOM events.
Functions
Function | Returns | Description |
---|---|---|
on( |
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( |
this |
Adds a set of type/listener pairs, e.g. {click: onClick, mousemove: onMouseMove} |
off( |
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( |
this |
Removes a set of type/listener pairs. |
stopPropagation( |
this |
Stop the given event from propagation to parent elements. Used inside the listener functions:
|
disableScrollPropagation( |
this |
Adds stopPropagation to the element's 'mousewheel' events (plus browser variants). |
disableClickPropagation( |
this |
Adds stopPropagation to the element's 'click' , 'doubleclick' , 'mousedown' and 'touchstart' events (plus browser variants). |
preventDefault( |
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( |
this |
Does stopPropagation and preventDefault at the same time. |
getMousePosition( |
Point |
Gets normalized mouse position from a DOM event relative to the container or to the whole page if not specified. |
getWheelDelta( |
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( |
HTMLElement |
Returns an element given its DOM id, or returns the element itself if it was passed directly. |
getStyle( |
String |
Returns the value for a certain style attribute on an element, including computed values or values set through CSS. |
create( |
HTMLElement |
Creates an HTML element with tagName , sets its class to className , and optionally appends it to container element. |
remove( |
|
Removes el from its parent element |
empty( |
|
Removes all of el 's children elements from el |
toFront( |
|
Makes el the last children of its parent, so it renders in front of the other children. |
toBack( |
|
Makes el the first children of its parent, so it renders back from the other children. |
hasClass( |
Boolean |
Returns true if the element's class attribute contains name . |
addClass( |
|
Adds name to the element's class attribute. |
removeClass( |
|
Removes name from the element's class attribute. |
setClass( |
|
Sets the element's class. |
getClass( |
String |
Returns the element's class. |
setOpacity( |
|
Set the opacity of an element. opacity must be a number from 0 to 1 . |
testProp( |
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( |
|
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( |
|
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( |
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( |
|
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( |
|
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