Interface MouseEventBase<TDelegateTarget, TData, TCurrentTarget, TTarget>

Type parameters

  • TDelegateTarget

  • TData

  • TCurrentTarget

  • TTarget

Hierarchy

Index

Properties

Methods

Properties

altKey

altKey: boolean

bubbles

bubbles: boolean

button

button: number

buttons

buttons: number

cancelable

cancelable: boolean

changedTouches

changedTouches: undefined

char

char: undefined
deprecated

charCode

charCode: undefined
deprecated

clientX

clientX: number

clientY

clientY: number

ctrlKey

ctrlKey: boolean

currentTarget

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

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

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

detail: number

eventPhase

eventPhase: number

key

key: undefined

keyCode

keyCode: undefined
deprecated

metaKey

metaKey: 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>

Optional namespace

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

offsetX: number

offsetY

offsetY: number

Optional originalEvent

originalEvent: _MouseEvent

pageX

pageX: 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

pageY: 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

pointerId: undefined

pointerType

pointerType: undefined

Optional relatedTarget

relatedTarget: EventTarget | null

The other DOM element involved in the event, if any.

see

``

since

1.1.4

example

​ ````On mouseout of anchors, alert the element type being entered.

$( "a" ).mouseout(function( event ) {
alert( event.relatedTarget.nodeName ); // "DIV"
});

Optional result

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

screenX: number

screenY

screenY: number

shiftKey

shiftKey: boolean

target

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

targetTouches: undefined

timeStamp

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

toElement: Element
deprecated

touches

touches: undefined

type

type: string

Describes the nature of the event.

see

``

since

1.0

example

​ ````On all anchor clicks, alert the event type.

$( "a" ).click(function( event ) {
alert( event.type ); // "click"
});

view

view: Window

which

which: number

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

see

``

since

1.1.3

deprecated

​ Deprecated since 3.3. See ``.

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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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