mouseReleased()

A function that's called once when a mouse button is released.

Declaring the function mouseReleased() sets a code block to run automatically when the user releases a mouse button after having pressed it:

function mouseReleased() {
  // Code to run.
}

The mouse system variables, such as mouseX and mouseY, will be updated with their most recent value when mouseReleased() is called by p5.js:

function mouseReleased() {
  if (mouseX < 50) {
    // Code to run if the mouse is on the left.
  }

  if (mouseY > 50) {
    // Code to run if the mouse is near the bottom.
  }
}

The parameter, event, is optional. mouseReleased() is always passed a MouseEvent object with properties that describe the mouse release event:

function mouseReleased(event) {
  // Code to run that uses the event.
  console.log(event);
}

On touchscreen devices, mouseReleased() will run when a user’s touch ends if touchEnded() isn’t declared. If touchEnded() is declared, then touchEnded() will run when a user’s touch ends and mouseReleased() won’t.

Browsers may have default behaviors attached to various mouse events. For example, some browsers highlight text when the user moves the mouse while pressing a mouse button. To prevent any default behavior for this event, add return false; to the end of the function.

Note: mousePressed(), mouseReleased(), and mouseClicked() are all related. mousePressed() runs as soon as the user clicks the mouse. mouseReleased() runs as soon as the user releases the mouse click. mouseClicked() runs immediately after mouseReleased().