Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface DragEvent<TDelegateTarget, TData, TCurrentTarget, TTarget>

Type Parameters

  • TDelegateTarget = any

  • TData = any

  • TCurrentTarget = any

  • TTarget = any

Hierarchy

  • DragEventBase<TDelegateTarget, TData, TCurrentTarget, TTarget>
    • DragEvent

Index

Properties

altKey: undefined | boolean
bubbles: boolean
button: undefined | number
buttons: undefined | number
cancelable: boolean
changedTouches: undefined | TouchList
char: undefined | string
deprecated
charCode: undefined | number
deprecated
clientX: undefined | number
clientY: undefined | number
ctrlKey: undefined | boolean
currentTarget: TCurrentTarget

The current DOM element within the event bubbling phase.

see

``

since

1.3

example

​ ````Alert that currentTarget matches the this keyword.

$( "p" ).click(function( event ) {
alert( event.currentTarget === this ); // true
});
data: TData

An optional object of data passed to an event method when the current executing handler is bound.

see

``

since

1.1

example

​ ````Within a for loop, pass the value of i to the .on() method so that the current iteration's value is preserved.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>event.data demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>

<button> 0 </button>
<button> 1 </button>
<button> 2 </button>
<button> 3 </button>
<button> 4 </button>

<div id="log"></div>

<script>
var logDiv = $( "#log" );

for ( var i = 0; i < 5; i++ ) {
$( "button" ).eq( i ).on( "click", { value: i }, function( event ) {
var msgs = [
"button = " + $( this ).index(),
"event.data.value = " + event.data.value,
"i = " + i
];
logDiv.append( msgs.join( ", " ) + "<br>" );
});
}
</script>

</body>
</html>
delegateTarget: TDelegateTarget

The element where the currently-called jQuery event handler was attached.

see

``

since

1.7

example

​ ````When a button in any box class is clicked, change the box's background color to red.

$( ".box" ).on( "click", "button", function( event ) {
$( event.delegateTarget ).css( "background-color", "red" );
});
detail: number
eventPhase: number
key: undefined | string
keyCode: undefined | number
deprecated
metaKey: undefined | boolean

Indicates whether the META key was pressed when the event fired.

see

``

since

1.0.4

example

​ ````Determine whether the META key was pressed when the event fired.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>event.metaKey demo</title>
<style>
body {
background-color: #eef;
}
div {
padding: 20px;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>

<button value="Test" name="Test" id="checkMetaKey">Click me!</button>
<div id="display"></div>

<script>
$( "#checkMetaKey" ).click(function( event ) {
$( "#display" ).text( event.metaKey );
});
</script>

</body>
</html>
namespace?: string

The namespace specified when the event was triggered.

see

``

since

1.4.3

example

​ ````Determine the event namespace used.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>event.namespace demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>

<button>display event.namespace</button>
<p></p>

<script>
$( "p" ).on( "test.something", function( event ) {
alert( event.namespace );
});
$( "button" ).click(function( event ) {
$( "p" ).trigger( "test.something" );
});
</script>

</body>
</html>
offsetX: undefined | number
offsetY: undefined | number
originalEvent?: DragEvent
pageX: undefined | number

The mouse position relative to the left edge of the document.

see

``

since

1.0.4

example

​ ````Show the mouse position relative to the left and top edges of the document (within this iframe).

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>event.pageX demo</title>
<style>
body {
background-color: #eef;
}
div {
padding: 20px;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>

<div id="log"></div>

<script>
$( document ).on( "mousemove", function( event ) {
$( "#log" ).text( "pageX: " + event.pageX + ", pageY: " + event.pageY );
});
</script>

</body>
</html>
pageY: undefined | number

The mouse position relative to the top edge of the document.

see

``

since

1.0.4

example

​ ````Show the mouse position relative to the left and top edges of the document (within this iframe).

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>event.pageY demo</title>
<style>
body {
background-color: #eef;
}
div {
padding: 20px;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>

<div id="log"></div>

<script>
$( document ).on( "mousemove", function( event ) {
$( "#log" ).text( "pageX: " + event.pageX + ", pageY: " + event.pageY );
});
</script>

</body>
</html>
pointerId: undefined | number
pointerType: undefined | string
result?: any

The last value returned by an event handler that was triggered by this event, unless the value was undefined.

see

``

since

1.3

example

​ ````Display previous handler's return value

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>event.result demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>

<button>display event.result</button>
<p></p>

<script>
$( "button" ).click(function( event ) {
return "hey";
});
$( "button" ).click(function( event ) {
$( "p" ).html( event.result );
});
</script>

</body>
</html>
screenX: undefined | number
screenY: undefined | number
shiftKey: undefined | boolean
target: TTarget

The DOM element that initiated the event.

see

``

since

1.0

example

​ ````Display the tag's name on click

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>event.target demo</title>
<style>
span, strong, p {
padding: 8px;
display: block;
border: 1px solid #999;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>

<div id="log"></div>
<div>
<p>
<strong><span>click</span></strong>
</p>
</div>

<script>
$( "body" ).click(function( event ) {
$( "#log" ).html( "clicked: " + event.target.nodeName );
});
</script>

</body>
</html>
example

​ ````Implements a simple event delegation: The click handler is added to an unordered list, and the children of its li children are hidden. Clicking one of the li children toggles (see toggle()) their children.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>event.target demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>

<ul>
<li>item 1
<ul>
<li>sub item 1-a</li>
<li>sub item 1-b</li>
</ul>
</li>
<li>item 2
<ul>
<li>sub item 2-a</li>
<li>sub item 2-b</li>
</ul>
</li>
</ul>

<script>
function handler( event ) {
var target = $( event.target );
if ( target.is( "li" ) ) {
target.children().toggle();
}
}
$( "ul" ).click( handler ).find( "ul" ).hide();
</script>

</body>
</html>
targetTouches: undefined | TouchList
timeStamp: number

The difference in milliseconds between the time the browser created the event and January 1, 1970.

see

``

since

1.2.6

example

​ ````Display the time since the click handler last executed.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>event.timeStamp demo</title>
<style>
div {
height: 100px;
width: 300px;
margin: 10px;
background-color: #ffd;
overflow: auto;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>

<div>Click.</div>

<script>
var last, diff;
$( "div" ).click(function( event ) {
if ( last ) {
diff = event.timeStamp - last;
$( "div" ).append( "time since last event: " + diff + "<br>" );
} else {
$( "div" ).append( "Click again.<br>" );
}
last = event.timeStamp;
});
</script>

</body>
</html>
toElement: undefined | Element
deprecated
touches: undefined | TouchList
type: "drag"

Describes the nature of the event.

view: Window
which: undefined | number

For key or mouse events, this property indicates the specific key or button that was pressed.

see

``

since

1.1.3

example

​ ````Log which key was depressed.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>event.which demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>

<input id="whichkey" value="type something">
<div id="log"></div>

<script>
$( "#whichkey" ).on( "keydown", function( event ) {
$( "#log" ).html( event.type + ": " + event.which );
});
</script>

</body>
</html>
example

​ ````Log which mouse button was depressed.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>event.which demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>

<input id="whichkey" value="click here">
<div id="log"></div>

<script>
$( "#whichkey" ).on( "mousedown", function( event ) {
$( "#log" ).html( event.type + ": " + event.which );
});
</script>

</body>
</html>

Methods

  • isDefaultPrevented(): boolean
  • Returns whether event.preventDefault() was ever called on this event object.

    see

    ``

    since

    1.3

    example

    ​ ````Checks whether event.preventDefault() was called.

    $( "a" ).click(function( event ) {
    alert( event.isDefaultPrevented() ); // false
    event.preventDefault();
    alert( event.isDefaultPrevented() ); // true
    });

    Returns boolean

  • isImmediatePropagationStopped(): boolean
  • Returns whether event.stopImmediatePropagation() was ever called on this event object.

    see

    ``

    since

    1.3

    example

    ​ ````Checks whether event.stopImmediatePropagation() was called.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>event.isImmediatePropagationStopped demo</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <button>click me</button>
    <div id="stop-log"></div>

    <script>
    function immediatePropStopped( event ) {
    var msg = "";
    if ( event.isImmediatePropagationStopped() ) {
    msg = "called";
    } else {
    msg = "not called";
    }
    $( "#stop-log" ).append( "<div>" + msg + "</div>" );
    }

    $( "button" ).click(function( event ) {
    immediatePropStopped( event );
    event.stopImmediatePropagation();
    immediatePropStopped( event );
    });
    </script>

    </body>
    </html>

    Returns boolean

  • isPropagationStopped(): boolean
  • Returns whether event.stopPropagation() was ever called on this event object.

    see

    ``

    since

    1.3

    example

    ​ ````Checks whether event.stopPropagation() was called

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>event.isPropagationStopped demo</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <button>click me</button>
    <div id="stop-log"></div>

    <script>
    function propStopped( event ) {
    var msg = "";
    if ( event.isPropagationStopped() ) {
    msg = "called";
    } else {
    msg = "not called";
    }
    $( "#stop-log" ).append( "<div>" + msg + "</div>" );
    }

    $( "button" ).click(function(event) {
    propStopped( event );
    event.stopPropagation();
    propStopped( event );
    });
    </script>

    </body>
    </html>

    Returns boolean

  • preventDefault(): void
  • If this method is called, the default action of the event will not be triggered.

    see

    ``

    since

    1.0

    example

    ​ ````Cancel the default action (navigation) of the click.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>event.preventDefault demo</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <a href="https://jquery.com">default click action is prevented</a>
    <div id="log"></div>

    <script>
    $( "a" ).click(function( event ) {
    event.preventDefault();
    $( "<div>" )
    .append( "default " + event.type + " prevented" )
    .appendTo( "#log" );
    });
    </script>

    </body>
    </html>

    Returns void

  • stopImmediatePropagation(): void
  • Keeps the rest of the handlers from being executed and prevents the event from bubbling up the DOM tree.

    see

    ``

    since

    1.3

    example

    ​ ````Prevents other event handlers from being called.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>event.stopImmediatePropagation demo</title>
    <style>
    p {
    height: 30px;
    width: 150px;
    background-color: #ccf;
    }
    div {
    height: 30px;
    width: 150px;
    background-color: #cfc;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>paragraph</p>
    <div>division</div>

    <script>
    $( "p" ).click(function( event ) {
    event.stopImmediatePropagation();
    });
    $( "p" ).click(function( event ) {
    // This function won't be executed
    $( this ).css( "background-color", "#f00" );
    });
    $( "div" ).click(function( event ) {
    // This function will be executed
    $( this ).css( "background-color", "#f00" );
    });
    </script>

    </body>
    </html>

    Returns void

  • stopPropagation(): void
  • Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

    see

    ``

    since

    1.0

    example

    ​ ````Kill the bubbling on the click event.

    $( "p" ).click(function( event ) {
    event.stopPropagation();
    // Do something
    });

    Returns void

Generated using TypeDoc