MouseUpEvent | PrimeFaces JavaScript API Docs

Type Parameters

TDelegateTarget = any
TData = any
TCurrentTarget = any
TTarget = any

Hierarchy

MouseEventBase<TDelegateTarget, TData, TCurrentTarget, TTarget>
- MouseUpEvent

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?: 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: "mouseup"

Describes the nature of the event.

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

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

Inherited from MouseEventBase.isDefaultPrevented
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

Inherited from MouseEventBase.stopPropagation
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

Type Parameters

TDelegateTarget = any

TData = any

TCurrentTarget = any

TTarget = any

Hierarchy

Index

Properties

Methods

Properties

altKey

bubbles

button

buttons

cancelable

changedTouches

char

charCode

clientX

clientY

ctrlKey

currentTarget

data

delegateTarget

detail

eventPhase

key

keyCode

metaKey

Optional namespace

offsetX

offsetY

Optional originalEvent

pageX

pageY

pointerId

pointerType

Optional relatedTarget

Optional result

screenX

screenY

shiftKey

target

targetTouches

timeStamp

toElement

touches

type

view

which

Methods

isDefaultPrevented

Returns boolean

isImmediatePropagationStopped

Returns boolean

isPropagationStopped

Returns boolean

preventDefault

Returns void

stopImmediatePropagation

Returns void

stopPropagation

Returns void