---
title: "MouseRollHandler | JavaScript maps SDK"
description: "Documentation for MapTiler SDK"
---

> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.

# Interface MouseRollHandler

Handlers interpret dom events and return camera changes that should be applied to the map (`HandlerResult`s). The camera changes are all deltas. The handler itself should have no knowledge of the map's current state. This makes it easier to merge multiple results and keeps handlers simpler. For example, if there is a mousedown and mousemove, the mousePan handler would return a `panDelta` on the mousemove.

interface MouseRollHandler {  
    [contextmenu](#contextmenu)?: (e: [MouseEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MouseEvent/)) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/);  
    [dblclick](#dblclick)?: (e: [MouseEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MouseEvent/), point: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/);  
    [dragEnd](#dragend): (e: [MouseEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MouseEvent/)) \=> void;  
    [dragMove](#dragmove): (e: [MouseEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MouseEvent/), point: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)) \=> void | [DragRollResult](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragRollResult/);  
    [dragStart](#dragstart): (e: [MouseEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MouseEvent/), point: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)) \=> void;  
    [keydown](#keydown)?: (e: [KeyboardEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.KeyboardEvent/)) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/);  
    [keyup](#keyup)?: (e: [KeyboardEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.KeyboardEvent/)) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/);  
    [mousedown](#mousedown)?: (e: [MouseEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MouseEvent/), point: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/);  
    [mousemove](#mousemove)?: (e: [MouseEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MouseEvent/), point: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/);  
    [mousemoveWindow](#mousemovewindow)?: (e: [MouseEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MouseEvent/), point: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/);  
    [mouseup](#mouseup)?: (e: [MouseEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MouseEvent/), point: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/);  
    [mouseupWindow](#mouseupwindow)?: (e: [MouseEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MouseEvent/), point: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/);  
    [renderFrame](#renderframe)?: () \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/);  
    [touchcancel](#touchcancel)?: (  
        e: [TouchEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TouchEvent/),  
        points: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)\[\],  
        mapTouches: [Touch](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Touch/)\[\],  
    ) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/);  
    [touchend](#touchend)?: (  
        e: [TouchEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TouchEvent/),  
        points: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)\[\],  
        mapTouches: [Touch](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Touch/)\[\],  
    ) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/);  
    [touchmove](#touchmove)?: (  
        e: [TouchEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TouchEvent/),  
        points: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)\[\],  
        mapTouches: [Touch](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Touch/)\[\],  
    ) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/);  
    [touchmoveWindow](#touchmovewindow)?: (  
        e: [TouchEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TouchEvent/),  
        points: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)\[\],  
        mapTouches: [Touch](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Touch/)\[\],  
    ) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/);  
    [touchstart](#touchstart)?: (  
        e: [TouchEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TouchEvent/),  
        points: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)\[\],  
        mapTouches: [Touch](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Touch/)\[\],  
    ) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/);  
    [wheel](#wheel)?: (e: [WheelEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.WheelEvent/), point: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/);  
    [disable](#disable-1)(): void;  
    [enable](#enable-1)(): void;  
    [isActive](#isactive-1)(): boolean;  
    [isEnabled](#isenabled-1)(): boolean;  
    [reset](#reset-1)(): void;  
}

#### Hierarchy ([View Summary](https://docs.maptiler.com/sdk-js/api-reference/hierarchy/#Externals.MouseRollHandler))

-   [DragMoveHandler](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/)<[DragRollResult](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragRollResult/), [MouseEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MouseEvent/)\>
    -   MouseRollHandler

##### Index

### Properties[](#properties)

[contextmenu?](#contextmenu) [dblclick?](#dblclick) [dragEnd](#dragend) [dragMove](#dragmove) [dragStart](#dragstart) [keydown?](#keydown) [keyup?](#keyup) [mousedown?](#mousedown) [mousemove?](#mousemove) [mousemoveWindow?](#mousemovewindow) [mouseup?](#mouseup) [mouseupWindow?](#mouseupwindow) [renderFrame?](#renderframe) [touchcancel?](#touchcancel) [touchend?](#touchend) [touchmove?](#touchmove) [touchmoveWindow?](#touchmovewindow) [touchstart?](#touchstart) [wheel?](#wheel)

### Methods[](#methods)

[disable](#disable) [enable](#enable) [isActive](#isactive) [isEnabled](#isenabled) [reset](#reset)

## Properties[](#properties-1)

### `Optional` `Readonly`contextmenu[](#contextmenu)

contextmenu?: (e: [MouseEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MouseEvent/)) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/)

Inherited from [DragMoveHandler](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/).[contextmenu](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/#contextmenu)

### `Optional` `Readonly`dblclick[](#dblclick)

dblclick?: (e: [MouseEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MouseEvent/), point: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/)

Inherited from [DragMoveHandler](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/).[dblclick](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/#dblclick)

### dragEnd[](#dragend)

dragEnd: (e: [MouseEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MouseEvent/)) \=> void

Inherited from [DragMoveHandler](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/).[dragEnd](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/#dragend)

### dragMove[](#dragmove)

dragMove: (e: [MouseEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MouseEvent/), point: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)) \=> void | [DragRollResult](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragRollResult/)

Inherited from [DragMoveHandler](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/).[dragMove](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/#dragmove)

### dragStart[](#dragstart)

dragStart: (e: [MouseEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MouseEvent/), point: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)) \=> void

Inherited from [DragMoveHandler](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/).[dragStart](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/#dragstart)

### `Optional` `Readonly`keydown[](#keydown)

keydown?: (e: [KeyboardEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.KeyboardEvent/)) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/)

Inherited from [DragMoveHandler](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/).[keydown](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/#keydown)

### `Optional` `Readonly`keyup[](#keyup)

keyup?: (e: [KeyboardEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.KeyboardEvent/)) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/)

Inherited from [DragMoveHandler](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/).[keyup](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/#keyup)

### `Optional` `Readonly`mousedown[](#mousedown)

mousedown?: (e: [MouseEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MouseEvent/), point: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/)

Inherited from [DragMoveHandler](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/).[mousedown](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/#mousedown)

### `Optional` `Readonly`mousemove[](#mousemove)

mousemove?: (e: [MouseEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MouseEvent/), point: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/)

Inherited from [DragMoveHandler](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/).[mousemove](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/#mousemove)

### `Optional` `Readonly`mousemoveWindow[](#mousemovewindow)

mousemoveWindow?: (e: [MouseEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MouseEvent/), point: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/)

Inherited from [DragMoveHandler](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/).[mousemoveWindow](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/#mousemovewindow)

### `Optional` `Readonly`mouseup[](#mouseup)

mouseup?: (e: [MouseEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MouseEvent/), point: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/)

Inherited from [DragMoveHandler](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/).[mouseup](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/#mouseup)

### `Optional` `Readonly`mouseupWindow[](#mouseupwindow)

mouseupWindow?: (e: [MouseEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MouseEvent/), point: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/)

Inherited from [DragMoveHandler](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/).[mouseupWindow](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/#mouseupwindow)

### `Optional` `Readonly`renderFrame[](#renderframe)

renderFrame?: () \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/)

`renderFrame` is the only non-dom event. It is called during render frames and can be used to smooth camera changes (see scroll handler).

Inherited from [DragMoveHandler](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/).[renderFrame](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/#renderframe)

### `Optional` `Readonly`touchcancel[](#touchcancel)

touchcancel?: (  
    e: [TouchEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TouchEvent/),  
    points: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)\[\],  
    mapTouches: [Touch](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Touch/)\[\],  
) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/)

Inherited from [DragMoveHandler](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/).[touchcancel](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/#touchcancel)

### `Optional` `Readonly`touchend[](#touchend)

touchend?: (  
    e: [TouchEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TouchEvent/),  
    points: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)\[\],  
    mapTouches: [Touch](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Touch/)\[\],  
) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/)

Inherited from [DragMoveHandler](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/).[touchend](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/#touchend)

### `Optional` `Readonly`touchmove[](#touchmove)

touchmove?: (  
    e: [TouchEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TouchEvent/),  
    points: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)\[\],  
    mapTouches: [Touch](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Touch/)\[\],  
) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/)

Inherited from [DragMoveHandler](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/).[touchmove](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/#touchmove)

### `Optional` `Readonly`touchmoveWindow[](#touchmovewindow)

touchmoveWindow?: (  
    e: [TouchEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TouchEvent/),  
    points: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)\[\],  
    mapTouches: [Touch](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Touch/)\[\],  
) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/)

Inherited from [DragMoveHandler](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/).[touchmoveWindow](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/#touchmovewindow)

### `Optional` `Readonly`touchstart[](#touchstart)

touchstart?: (  
    e: [TouchEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TouchEvent/),  
    points: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)\[\],  
    mapTouches: [Touch](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Touch/)\[\],  
) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/)

Inherited from [DragMoveHandler](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/).[touchstart](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/#touchstart)

### `Optional` `Readonly`wheel[](#wheel)

wheel?: (e: [WheelEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.WheelEvent/), point: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/)

Inherited from [DragMoveHandler](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/).[wheel](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/#wheel)

## Methods[](#methods-1)

### disable[](#disable)

-   disable(): void[](#disable-1)
    
    #### Returns void
    
    Inherited from [DragMoveHandler](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/).[disable](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/#disable)
    

### enable[](#enable)

-   enable(): void[](#enable-1)
    
    #### Returns void
    
    Inherited from [DragMoveHandler](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/).[enable](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/#enable)
    

### isActive[](#isactive)

-   isActive(): boolean[](#isactive-1)
    
    This is used to indicate if the handler is currently active or not. In case a handler is active, it will block other handlers from getting the relevant events. There is an allow list of handlers that can be active at the same time, which is configured when adding a handler.
    
    #### Returns boolean
    
    Inherited from [DragMoveHandler](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/).[isActive](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/#isactive)
    

### isEnabled[](#isenabled)

-   isEnabled(): boolean[](#isenabled-1)
    
    #### Returns boolean
    
    Inherited from [DragMoveHandler](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/).[isEnabled](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/#isenabled)
    

### reset[](#reset)

-   reset(): void[](#reset-1)
    
    `reset` can be called by the manager at any time and must reset everything to it's original state
    
    #### Returns void
    
    Inherited from [DragMoveHandler](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/).[reset](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/#reset)