The mouseup
event is fired at an Element
when a button on a pointing device (such as a mouse or trackpad) is released while the pointer is located inside it. mouseup
events are the counterpoint to mousedown
events.
Bubbles | Yes |
Cancelable | Yes |
Interface | MouseEvent
|
Event handler property | onmouseup
|
Examples
The following example uses the mousedown
, mousemove
, and mouseup
events to allow the user to draw on an HTML5 canvas. Its functionality is simple: the thickness of the line is set to 1, and the color is always black.
When the page loads, constants myPics
and context
are created to store a reference to the canvas and the 2d context we will use to draw.
Drawing begins when the mousedown
event fires. First we store the x and y coordinates of the mouse pointer in the variables x
and y
, and then set isDrawing
to true.
As the mouse moves over the page, the mousemove
event fires. If isDrawing
is true, the event handler calls the drawLine
function to draw a line from the stored x
and y
values to the current location.
When the drawLine()
function returns, we adjust the coordinates and then save them in x
and y
.
The mouseup
event draws the final line segment, sets x
and y
to 0
, and stops further drawing by setting isDrawing
to false
.
HTML
<h1>Drawing with mouse events</h1>
<canvas id="myPics" width="560" height="360"></canvas>
CSS
canvas {
border: 1px solid black;
width: 560px;
height: 360px;
}
JavaScript
// When true, moving the mouse draws on the canvas
let isDrawing = false;
let x = 0;
let y = 0;
const myPics = document.getElementById('myPics');
const context = myPics.getContext('2d');
// event.offsetX, event.offsetY gives the (x,y) offset from the edge of the canvas.
// Add the event listeners for mousedown, mousemove, and mouseup
myPics.addEventListener('mousedown', e => {
x = e.offsetX;
y = e.offsetY;
isDrawing = true;
});
myPics.addEventListener('mousemove', e => {
if (isDrawing === true) {
drawLine(context, x, y, e.offsetX, e.offsetY);
x = e.offsetX;
y = e.offsetY;
}
});
window.addEventListener('mouseup', e => {
if (isDrawing === true) {
drawLine(context, x, y, e.offsetX, e.offsetY);
x = 0;
y = 0;
isDrawing = false;
}
});
function drawLine(context, x1, y1, x2, y2) {
context.beginPath();
context.strokeStyle = 'black';
context.lineWidth = 1;
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.stroke();
context.closePath();
}
Result
Specifications
Specification
Status
UI EventsThe definition of 'mouseup' in that specification.
Working Draft
Obsolete
Browser compatibility
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
mouseup event
|
Chrome
Full support 2 |
Edge
Full support 12 |
Firefox
Full support 6 |
IE
Full support 9 |
Opera
Full support 11.6 |
Safari
Full support 4 |
WebView Android
Full support ≤37 |
Chrome Android
Full support 18 |
Firefox Android
Full support 6 |
Opera Android
Full support 12.1 |
Safari iOS
Full support 3.2 |
Samsung Internet Android
Full support 1.0 |
Legend
- Full support
- Full support
See also
- [[../../../../Learn/JavaScript/Building_blocks/Events|Introduction to events]]
mousedown
mouseup
mousemove
click
dblclick
mouseover
mouseout
mouseenter
mouseleave
contextmenu
Element: mouseup event by Mozilla Contributors is licensed under CC-BY-SA 2.5.