React onMouseMove Event

React onMouseUp Event

Last Updated : 24 Apr, 2025

React onMouseUp event is used to detect when a mouse button is released over an element. It triggers when the user releases a mouse button while the cursor is over an element. It is particularly useful where you want to detect the ending of a mouse click or drag operation.

It is similar to the HTML DOM onmouseup event but uses the camelCase convention in React.

Syntax:

<element onMouseUp={function}/>

Parameter: The parameter for the onMouseUp event handler is a function that represents the action to be taken when the mouse button is released.

Return type: The return type of the function attached to onMouseUp is usually void because it doesn't return anything, but it can perform actions, update state, or trigger other functions as needed within the component based on the mouse-up event.

Example 1: Basic implementation of onMouseUp event.

JavaScript

// App.js
import React from 'react';

class App extends React.Component { 
  handleMouseUp = () => {
    console.log('Mouse button released.');
    // Additional code...
  };

  render() {
    return (
      <div onMouseUp={this.handleMouseUp}>
        <p>Click and hold, then release the mouse button.</p>
      </div>
    );
  }
}

export default App;

Output:

Animation2 — Simple onMouseUp() example.

Example 2: Combining onMouseUp() with other mouse-related events such as onMouseDown() and onMouseMove().

JavaScript

// App.js
import React from 'react';

class App extends React.Component { 
    handleMouseDown = () => {
        console.log('Mouse button pressed.');
        // Additional logic for initiating drag operation
      };
    
      handleMouseUp = () => {
        console.log('Mouse button released.');
        // Additional logic for ending drag operation
      };

  render() {
    return (
        <div
        onMouseDown={this.handleMouseDown}
        onMouseUp={this.handleMouseUp}
      >
        <p>Click and hold to start dragging.</p>
      </div>
    );
  }
}

export default App;

Output:

Animation3

React onMouseMove Event

S

souravsharma098

Improve

Article Tags :

Similar Reads

React onMouseMove Event

React onMouseMove event detects a mouse movement over an element. The event triggers when the mouse pointer moves while positioned over an element. It is particularly useful where you want to track and respond to the movement of the user's cursor. It is similar to theÂ HTML DOM onmousemove eventÂ but

React onMouseDown Event

The onMouseDown event is a native DOM event in React that triggers when the mouse button is pressed down on an element. It is part of a set of mouse events that React and the DOM handle, which includes events like onClick, onMouseUp, onMouseEnter, and others. onMouseDown occurs when any mouse button

React onKeyUp Event

React onKeyUp is an event listener that is used to detect the key release event in a browser using JavaScript. This event occurs once after the key is pressed and released. It is similar to the HTML DOM onkeyup event but uses the camelCase convention in React. Syntax:<input onKeyUp={keyUpFunction

React onFocus event

The onFocus event in React is triggered when an element receives focus, meaning it becomes the active element that can accept user input. This event is commonly used to execute functions or perform actions when an element gains focus. It is similar to the HTML DOM onfocus event but uses the camelCas

React onMouseEnter Event

React onMouseEnter() is an event handler that triggers when the mouse cursor enters the boundaries of an element. It is particularly useful where you want to initiate actions or display information when the user's cursor hovers over an element. It is similar to theÂ HTML DOM onmouseenter eventÂ but us

React onPointerUp Event

React onPointerUp event fires when the mouse button is clicked and released and it detects the right, left, or middle click of the mouse. Similar to other events, we have to provide a function that will execute their process. Syntax:onPointerUp={function}Parameter : function that will call once any

React onCopy Event

React onCopy Clipboard event is an event handler which detects the copy process in the browser using JavaScript. When the user starts copying data through the shortcut key (CTRL + C) or the copy button present in the menu, this even automatically fires, and the function passed to it will call itself

React onPaste Event

React onPaste event is an event handler which triggers when a user pastes any text or data in any tag inside the browser. It is mostly used on <input> tags. Paste can be done through shortcut keys (CTRL + V) or the Paste button present inside the menu. It is similar to the HTML DOM onpaste eve

React onTouchEnd Event

React onTouchEnd event event fires when the user touches screen and releases the touch. Similar to other elements in it, we have to pass a function for process execution. It is similar to the HTML DOM ontouchend event but uses the camelCase convention in React. Syntax:onTouchEnd={function}Parameter

React onCut Event

React onCut Clipboard event is an event handler event, which detects the cut process in the browser. When the user starts cutting data through the shortcut key (CTRL + X) or the cut button present in the menu, this even automatically fires, and the function passed to it will call itself automaticall