Skip to main content

DragEvent

The DragEvent interface is a DOM event that represents a drag and drop interaction. The user initiates a drag by placing a pointer device (such as a mouse) on the touch surface and then dragging the pointer to a new location (such as another DOM element). Applications are free to interpret a drag and drop interaction in an application-specific way.

MDN Reference

Extends​

Methods​

composedPath()​

composedPath(): EventTarget[];

The composedPath() method of the Event interface returns the event's path which is an array of the objects on which listeners will be invoked. This does not include nodes in shadow trees if the shadow root was created with its ShadowRoot.mode closed.

MDN Reference

Returns​

EventTarget[]

Inherited from​

MouseEvent.composedPath

getModifierState()​

getModifierState(keyArg): boolean;

The MouseEvent.getModifierState() method returns the current state of the specified modifier key: true if the modifier is active (i.e., the modifier key is pressed or locked), otherwise, false.

MDN Reference

Parameters​

ParameterType
keyArgstring

Returns​

boolean

Inherited from​

MouseEvent.getModifierState

initEvent()​

initEvent(
   type, 
   bubbles?, 
   cancelable?
): void;

The Event.initEvent() method is used to initialize the value of an event created using Document.createEvent().

Parameters​

ParameterType
typestring
bubbles?boolean
cancelable?boolean

Returns​

void

Deprecated​

MDN Reference

Inherited from​

MouseEvent.initEvent

initMouseEvent()​

initMouseEvent(
   typeArg, 
   canBubbleArg, 
   cancelableArg, 
   viewArg, 
   detailArg, 
   screenXArg, 
   screenYArg, 
   clientXArg, 
   clientYArg, 
   ctrlKeyArg, 
   altKeyArg, 
   shiftKeyArg, 
   metaKeyArg, 
   buttonArg, 
   relatedTargetArg
): void;

The MouseEvent.initMouseEvent() method initializes the value of a mouse event once it's been created (normally using the Document.createEvent() method).

Parameters​

ParameterType
typeArgstring
canBubbleArgboolean
cancelableArgboolean
viewArgWindow
detailArgnumber
screenXArgnumber
screenYArgnumber
clientXArgnumber
clientYArgnumber
ctrlKeyArgboolean
altKeyArgboolean
shiftKeyArgboolean
metaKeyArgboolean
buttonArgnumber
relatedTargetArgEventTarget | null

Returns​

void

Deprecated​

MDN Reference

Inherited from​

MouseEvent.initMouseEvent

initUIEvent()​

initUIEvent(
   typeArg, 
   bubblesArg?, 
   cancelableArg?, 
   viewArg?, 
   detailArg?
): void;

The UIEvent.initUIEvent() method initializes a UI event once it's been created.

Parameters​

ParameterType
typeArgstring
bubblesArg?boolean
cancelableArg?boolean
viewArg?Window | null
detailArg?number

Returns​

void

Deprecated​

MDN Reference

Inherited from​

MouseEvent.initUIEvent

preventDefault()​

preventDefault(): void;

The preventDefault() method of the Event interface tells the user agent that the event is being explicitly handled, so its default action, such as page scrolling, link navigation, or pasting text, should not be taken.

MDN Reference

Returns​

void

Inherited from​

MouseEvent.preventDefault

stopImmediatePropagation()​

stopImmediatePropagation(): void;

The stopImmediatePropagation() method of the Event interface prevents other listeners of the same event from being called.

MDN Reference

Returns​

void

Inherited from​

MouseEvent.stopImmediatePropagation

stopPropagation()​

stopPropagation(): void;

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases. It does not, however, prevent any default behaviors from occurring; for instance, clicks on links are still processed. If you want to stop those behaviors, see the preventDefault() method. It also does not prevent propagation to other event-handlers of the current element. If you want to stop those, see stopImmediatePropagation().

MDN Reference

Returns​

void

Inherited from​

MouseEvent.stopPropagation

Properties​

altKey​

readonly altKey: boolean;

The MouseEvent.altKey read-only property is a boolean value that indicates whether the alt key was pressed or not when a given mouse event occurs.

MDN Reference

Inherited from​

MouseEvent.altKey

AT_TARGET​

readonly AT_TARGET: 2;

Inherited from​

MouseEvent.AT_TARGET

bubbles​

readonly bubbles: boolean;

The bubbles read-only property of the Event interface indicates whether the event bubbles up through the DOM tree or not.

MDN Reference

Inherited from​

MouseEvent.bubbles

BUBBLING_PHASE​

readonly BUBBLING_PHASE: 3;

Inherited from​

MouseEvent.BUBBLING_PHASE

button​

readonly button: number;

The MouseEvent.button read-only property indicates which button was pressed or released on the mouse to trigger the event.

MDN Reference

Inherited from​

MouseEvent.button

buttons​

readonly buttons: number;

The MouseEvent.buttons read-only property indicates which buttons are pressed on the mouse (or other input device) when a mouse event is triggered.

MDN Reference

Inherited from​

MouseEvent.buttons

cancelable​

readonly cancelable: boolean;

The cancelable read-only property of the Event interface indicates whether the event can be canceled, and therefore prevented as if the event never happened.

MDN Reference

Inherited from​

MouseEvent.cancelable

cancelBubble​

cancelBubble: boolean;

The cancelBubble property of the Event interface is deprecated. Use Event.stopPropagation() instead. Setting its value to true before returning from an event handler prevents propagation of the event. In later implementations, setting this to false does nothing. See Browser compatibility for details.

Deprecated​

MDN Reference

Inherited from​

MouseEvent.cancelBubble

CAPTURING_PHASE​

readonly CAPTURING_PHASE: 1;

Inherited from​

MouseEvent.CAPTURING_PHASE

clientX​

readonly clientX: number;

The clientX read-only property of the MouseEvent interface provides the horizontal coordinate within the application's viewport at which the event occurred (as opposed to the coordinate within the page).

MDN Reference

Inherited from​

MouseEvent.clientX

clientY​

readonly clientY: number;

The clientY read-only property of the MouseEvent interface provides the vertical coordinate within the application's viewport at which the event occurred (as opposed to the coordinate within the page).

MDN Reference

Inherited from​

MouseEvent.clientY

composed​

readonly composed: boolean;

The read-only composed property of the Event interface returns a boolean value which indicates whether or not the event will propagate across the shadow DOM boundary into the standard DOM.

MDN Reference

Inherited from​

MouseEvent.composed

ctrlKey​

readonly ctrlKey: boolean;

The MouseEvent.ctrlKey read-only property is a boolean value that indicates whether the ctrl key was pressed or not when a given mouse event occurs.

MDN Reference

Inherited from​

MouseEvent.ctrlKey

currentTarget​

readonly currentTarget: EventTarget | null;

The currentTarget read-only property of the Event interface identifies the element to which the event handler has been attached.

MDN Reference

Inherited from​

MouseEvent.currentTarget

dataTransfer​

readonly dataTransfer: DataTransfer | null;

The DragEvent.dataTransfer read-only property holds the drag operation's data (as a DataTransfer object).

MDN Reference

defaultPrevented​

readonly defaultPrevented: boolean;

The defaultPrevented read-only property of the Event interface returns a boolean value indicating whether or not the call to Event.preventDefault() canceled the event.

MDN Reference

Inherited from​

MouseEvent.defaultPrevented

detail​

readonly detail: number;

The UIEvent.detail read-only property, when non-zero, provides the current (or next, depending on the event) click count.

MDN Reference

Inherited from​

MouseEvent.detail

eventPhase​

readonly eventPhase: number;

The eventPhase read-only property of the Event interface indicates which phase of the event flow is currently being evaluated.

MDN Reference

Inherited from​

MouseEvent.eventPhase

isTrusted​

readonly isTrusted: boolean;

The isTrusted read-only property of the Event interface is a boolean value that is true when the event was generated by the user agent (including via user actions and programmatic methods such as HTMLElement.focus()), and false when the event was dispatched via EventTarget.dispatchEvent(). The only exception is the click event, which initializes the isTrusted property to false in user agents.

MDN Reference

Inherited from​

MouseEvent.isTrusted

layerX​

readonly layerX: number;

The MouseEvent.layerX read-only property returns the horizontal coordinate of the event relative to the current layer.

MDN Reference

Inherited from​

MouseEvent.layerX

layerY​

readonly layerY: number;

The MouseEvent.layerY read-only property returns the vertical coordinate of the event relative to the current layer.

MDN Reference

Inherited from​

MouseEvent.layerY

metaKey​

readonly metaKey: boolean;

The MouseEvent.metaKey read-only property is a boolean value that indicates whether the meta key was pressed or not when a given mouse event occurs.

MDN Reference

Inherited from​

MouseEvent.metaKey

movementX​

readonly movementX: number;

The movementX read-only property of the MouseEvent interface provides the difference in the X coordinate of the mouse (or pointer) between the given move event and the previous move event of the same type.

MDN Reference

Inherited from​

MouseEvent.movementX

movementY​

readonly movementY: number;

The movementY read-only property of the MouseEvent interface provides the difference in the Y coordinate of the mouse (or pointer) between the given move event and the previous move event of the same type.

MDN Reference

Inherited from​

MouseEvent.movementY

NONE​

readonly NONE: 0;

Inherited from​

MouseEvent.NONE

offsetX​

readonly offsetX: number;

The offsetX read-only property of the MouseEvent interface provides the offset in the X coordinate of the mouse pointer between that event and the padding edge of the target node.

MDN Reference

Inherited from​

MouseEvent.offsetX

offsetY​

readonly offsetY: number;

The offsetY read-only property of the MouseEvent interface provides the offset in the Y coordinate of the mouse pointer between that event and the padding edge of the target node.

MDN Reference

Inherited from​

MouseEvent.offsetY

pageX​

readonly pageX: number;

The pageX read-only property of the MouseEvent interface returns the X (horizontal) coordinate (in pixels) at which the mouse was clicked, relative to the left edge of the entire document. This includes any portion of the document not currently visible.

MDN Reference

Inherited from​

MouseEvent.pageX

pageY​

readonly pageY: number;

The pageY read-only property of the MouseEvent interface returns the Y (vertical) coordinate (in pixels) at which the mouse was clicked, relative to the top edge of the entire document. This includes any portion of the document not currently visible.

MDN Reference

Inherited from​

MouseEvent.pageY

relatedTarget​

readonly relatedTarget: EventTarget | null;

The MouseEvent.relatedTarget read-only property is the secondary target for the mouse event, if there is one.

MDN Reference

Inherited from​

MouseEvent.relatedTarget

returnValue​

returnValue: boolean;

The Event property returnValue indicates whether the default action for this event has been prevented or not.

Deprecated​

MDN Reference

Inherited from​

MouseEvent.returnValue

screenX​

readonly screenX: number;

The screenX read-only property of the MouseEvent interface provides the horizontal coordinate (offset) of the mouse pointer in screen coordinates.

MDN Reference

Inherited from​

MouseEvent.screenX

screenY​

readonly screenY: number;

The screenY read-only property of the MouseEvent interface provides the vertical coordinate (offset) of the mouse pointer in screen coordinates.

MDN Reference

Inherited from​

MouseEvent.screenY

shiftKey​

readonly shiftKey: boolean;

The MouseEvent.shiftKey read-only property is a boolean value that indicates whether the shift key was pressed or not when a given mouse event occurs.

MDN Reference

Inherited from​

MouseEvent.shiftKey

srcElement​

readonly srcElement: EventTarget | null;

The deprecated Event.srcElement is an alias for the Event.target property. Use Event.target instead.

Deprecated​

MDN Reference

Inherited from​

MouseEvent.srcElement

target​

readonly target: EventTarget | null;

The read-only target property of the Event interface is a reference to the object onto which the event was dispatched. It is different from Event.currentTarget when the event handler is called during the bubbling or capturing phase of the event.

MDN Reference

Inherited from​

MouseEvent.target

timeStamp​

readonly timeStamp: number;

The timeStamp read-only property of the Event interface returns the time (in milliseconds) at which the event was created.

MDN Reference

Inherited from​

MouseEvent.timeStamp

type​

readonly type: string;

The type read-only property of the Event interface returns a string containing the event's type. It is set when the event is constructed and is the name commonly used to refer to the specific event, such as click, load, or error.

MDN Reference

Inherited from​

MouseEvent.type

view​

readonly view: Window | null;

The UIEvent.view read-only property returns the WindowProxy object from which the event was generated. In browsers, this is the Window object the event happened in.

MDN Reference

Inherited from​

MouseEvent.view

which​

readonly which: number;

The UIEvent.which read-only property of the UIEvent interface returns a number that indicates which button was pressed on the mouse, or the numeric keyCode or the character code (charCode) of the key pressed on the keyboard.

Deprecated​

MDN Reference

Inherited from​

MouseEvent.which

x​

readonly x: number;

The MouseEvent.x property is an alias for the MouseEvent.clientX property.

MDN Reference

Inherited from​

MouseEvent.x

y​

readonly y: number;

The MouseEvent.y property is an alias for the MouseEvent.clientY property.

MDN Reference

Inherited from​

MouseEvent.y