import {Point} from '../geometry/Point'; import * as Util from '../core/Util'; import * as Browser from '../core/Browser'; import {addPointerListener, removePointerListener} from './DomEvent.Pointer'; import {addDoubleTapListener, removeDoubleTapListener} from './DomEvent.DoubleTap'; /* * @namespace DomEvent * Utility functions to work with the [DOM events](https://developer.mozilla.org/docs/Web/API/Event), used by Leaflet internally. */ // Inspired by John Resig, Dean Edwards and YUI addEvent implementations. // @function on(el: HTMLElement, types: String, fn: Function, context?: Object): 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'`). // @alternative // @function on(el: HTMLElement, eventMap: Object, context?: Object): this // Adds a set of type/listener pairs, e.g. `{click: onClick, mousemove: onMouseMove}` export function on(obj, types, fn, context) { if (typeof types === 'object') { for (var type in types) { addOne(obj, type, types[type], fn); } } else { types = Util.splitWords(types); for (var i = 0, len = types.length; i < len; i++) { addOne(obj, types[i], fn, context); } } return this; } var eventsKey = '_leaflet_events'; // @function off(el: HTMLElement, types: String, fn: Function, context?: Object): this // Removes a previously added listener function. // Note that if you passed a custom context to on, you must pass the same // context to `off` in order to remove the listener. // @alternative // @function off(el: HTMLElement, eventMap: Object, context?: Object): this // Removes a set of type/listener pairs, e.g. `{click: onClick, mousemove: onMouseMove}` export function off(obj, types, fn, context) { if (typeof types === 'object') { for (var type in types) { removeOne(obj, type, types[type], fn); } } else if (types) { types = Util.splitWords(types); for (var i = 0, len = types.length; i < len; i++) { removeOne(obj, types[i], fn, context); } } else { for (var j in obj[eventsKey]) { removeOne(obj, j, obj[eventsKey][j]); } delete obj[eventsKey]; } return this; } function addOne(obj, type, fn, context) { var id = type + Util.stamp(fn) + (context ? '_' + Util.stamp(context) : ''); if (obj[eventsKey] && obj[eventsKey][id]) { return this; } var handler = function (e) { return fn.call(context || obj, e || window.event); }; var originalHandler = handler; if (Browser.pointer && type.indexOf('touch') === 0) { // Needs DomEvent.Pointer.js addPointerListener(obj, type, handler, id); } else if (Browser.touch && (type === 'dblclick') && addDoubleTapListener && !(Browser.pointer && Browser.chrome)) { // Chrome >55 does not need the synthetic dblclicks from addDoubleTapListener // See #5180 addDoubleTapListener(obj, handler, id); } else if ('addEventListener' in obj) { if (type === 'mousewheel') { obj.addEventListener('onwheel' in obj ? 'wheel' : 'mousewheel', handler, false); } else if ((type === 'mouseenter') || (type === 'mouseleave')) { handler = function (e) { e = e || window.event; if (isExternalTarget(obj, e)) { originalHandler(e); } }; obj.addEventListener(type === 'mouseenter' ? 'mouseover' : 'mouseout', handler, false); } else { if (type === 'click' && Browser.android) { handler = function (e) { filterClick(e, originalHandler); }; } obj.addEventListener(type, handler, false); } } else if ('attachEvent' in obj) { obj.attachEvent('on' + type, handler); } obj[eventsKey] = obj[eventsKey] || {}; obj[eventsKey][id] = handler; } function removeOne(obj, type, fn, context) { var id = type + Util.stamp(fn) + (context ? '_' + Util.stamp(context) : ''), handler = obj[eventsKey] && obj[eventsKey][id]; if (!handler) { return this; } if (Browser.pointer && type.indexOf('touch') === 0) { removePointerListener(obj, type, id); } else if (Browser.touch && (type === 'dblclick') && removeDoubleTapListener && !(Browser.pointer && Browser.chrome)) { removeDoubleTapListener(obj, id); } else if ('removeEventListener' in obj) { if (type === 'mousewheel') { obj.removeEventListener('onwheel' in obj ? 'wheel' : 'mousewheel', handler, false); } else { obj.removeEventListener( type === 'mouseenter' ? 'mouseover' : type === 'mouseleave' ? 'mouseout' : type, handler, false); } } else if ('detachEvent' in obj) { obj.detachEvent('on' + type, handler); } obj[eventsKey][id] = null; } // @function stopPropagation(ev: DOMEvent): this // Stop the given event from propagation to parent elements. Used inside the listener functions: // ```js // L.DomEvent.on(div, 'click', function (ev) { // L.DomEvent.stopPropagation(ev); // }); // ``` export function stopPropagation(e) { if (e.stopPropagation) { e.stopPropagation(); } else if (e.originalEvent) { // In case of Leaflet event. e.originalEvent._stopped = true; } else { e.cancelBubble = true; } skipped(e); return this; } // @function disableScrollPropagation(el: HTMLElement): this // Adds `stopPropagation` to the element's `'mousewheel'` events (plus browser variants). export function disableScrollPropagation(el) { addOne(el, 'mousewheel', stopPropagation); return this; } // @function disableClickPropagation(el: HTMLElement): this // Adds `stopPropagation` to the element's `'click'`, `'doubleclick'`, // `'mousedown'` and `'touchstart'` events (plus browser variants). export function disableClickPropagation(el) { on(el, 'mousedown touchstart dblclick', stopPropagation); addOne(el, 'click', fakeStop); return this; } // @function preventDefault(ev: DOMEvent): 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 `
` is submitted). // Use it inside listener functions. export function preventDefault(e) { if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; } return this; } // @function stop(ev: DOMEvent): this // Does `stopPropagation` and `preventDefault` at the same time. export function stop(e) { preventDefault(e); stopPropagation(e); return this; } // @function getMousePosition(ev: DOMEvent, container?: HTMLElement): Point // Gets normalized mouse position from a DOM event relative to the // `container` or to the whole page if not specified. export function getMousePosition(e, container) { if (!container) { return new Point(e.clientX, e.clientY); } var rect = container.getBoundingClientRect(); var scaleX = rect.width / container.offsetWidth || 1; var scaleY = rect.height / container.offsetHeight || 1; return new Point( e.clientX / scaleX - rect.left - container.clientLeft, e.clientY / scaleY - rect.top - container.clientTop); } // Chrome on Win scrolls double the pixels as in other platforms (see #4538), // and Firefox scrolls device pixels, not CSS pixels var wheelPxFactor = (Browser.win && Browser.chrome) ? 2 * window.devicePixelRatio : Browser.gecko ? window.devicePixelRatio : 1; // @function getWheelDelta(ev: DOMEvent): 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 60 pixels. export function getWheelDelta(e) { return (Browser.edge) ? e.wheelDeltaY / 2 : // Don't trust window-geometry-based delta (e.deltaY && e.deltaMode === 0) ? -e.deltaY / wheelPxFactor : // Pixels (e.deltaY && e.deltaMode === 1) ? -e.deltaY * 20 : // Lines (e.deltaY && e.deltaMode === 2) ? -e.deltaY * 60 : // Pages (e.deltaX || e.deltaZ) ? 0 : // Skip horizontal/depth wheel events e.wheelDelta ? (e.wheelDeltaY || e.wheelDelta) / 2 : // Legacy IE pixels (e.detail && Math.abs(e.detail) < 32765) ? -e.detail * 20 : // Legacy Moz lines e.detail ? e.detail / -32765 * 60 : // Legacy Moz pages 0; } var skipEvents = {}; export function fakeStop(e) { // fakes stopPropagation by setting a special event flag, checked/reset with skipped(e) skipEvents[e.type] = true; } export function skipped(e) { var events = skipEvents[e.type]; // reset when checking, as it's only used in map container and propagates outside of the map skipEvents[e.type] = false; return events; } // check if element really left/entered the event target (for mouseenter/mouseleave) export function isExternalTarget(el, e) { var related = e.relatedTarget; if (!related) { return true; } try { while (related && (related !== el)) { related = related.parentNode; } } catch (err) { return false; } return (related !== el); } var lastClick; // this is a horrible workaround for a bug in Android where a single touch triggers two click events function filterClick(e, handler) { var timeStamp = (e.timeStamp || (e.originalEvent && e.originalEvent.timeStamp)), elapsed = lastClick && (timeStamp - lastClick); // are they closer together than 500ms yet more than 100ms? // Android typically triggers them ~300ms apart while multiple listeners // on the same event should be triggered far faster; // or check if click is simulated on the element, and if it is, reject any non-simulated events if ((elapsed && elapsed > 100 && elapsed < 500) || (e.target._simulatedClick && !e._simulated)) { stop(e); return; } lastClick = timeStamp; handler(e); } // @function addListener(…): this // Alias to [`L.DomEvent.on`](#domevent-on) export {on as addListener}; // @function removeListener(…): this // Alias to [`L.DomEvent.off`](#domevent-off) export {off as removeListener};