Skip to content

Courses
Tutorials
Practice
Contests

React Tutorial
React Exercise
React Basic Concepts
React Components
React Props
React Hooks
React Router
React Advanced
React Examples
React Interview Questions
React Projects
Next.js Tutorial
React Bootstrap
React Material UI
React Ant Design
React Desktop
React Rebass
React Blueprint
JavaScript
Web Technology

React onMouseUp Event

React onPointerUp Event

Last Updated : 26 Jul, 2024

Comments

Improve

Suggest changes

Like Article

Like

Report

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 button released after clicked is detect from mouse.

Return type:

event: It is an event object containing information about the event like target element and values

Example 1 : In this example, we implemented an area where the user will click any button, and in the event, the user will get numbers (which can be 0, 1, or 2), and accordingly, we are assuming which button is clicked.

CSS

/* App.css */ .App { 	width: 30vw; 	margin: auto; 	text-align: center; 	color: green; 	font-size: 23px; }  .Shaded { 	background-color: lightgray; 	height: 200px; 	width: 300px; 	margin: auto; 	border-radius: 6px; }

JavaScript

// App.js import { useState } from "react"; import "./App.css" const App = () => { 	const [click, setClick] = useState(); 	const function1 = (event) => { 		if (event.button === 0) { 			setClick("Left Click"); 		} 		else if (event.button === 1) { 			setClick("Middle Click") 		} 		else if (event.button === 2) { 			setClick("Right Click") 		} 		else { 			setClick("Undefined Click") 		} 	} 	return ( 		<div className="App"> 			<h1>GeeksforGeeks</h1> 			<h2>Click inside the the shaded area</h2> 			{ 				click ? <p>{click}</p> : null 			} 			<div className="Shaded" onPointerUp={function1}>  			</div> 		</div> 	); } export default App;

Output:

Animation

Example 2: In this example, we implemented an area where users can click and detect the onPointerUp event that is fired through an alert.

CSS

/*App.css*/ .App {     width: 30vw;     margin: auto;     text-align: center;     color: green;     font-size: 23px; }  .Shaded {     background-color: lightgray;     height: 200px;     width: 300px;     margin: auto;     border-radius: 6px; }

JavaScript

// App.js import "./App.css" const App = () => { 	const function1 = (event) => { 		alert("Pointer Up Event Fired!") 		console.log(event) 	}  	return ( 		<div className="App"> 			<h1>GeeksforGeeks</h1> 			<h2>Click inside the the shaded area</h2> 			<div className="Shaded" onPointerUp={function1}> 			</div> 		</div> 	); } export default App;

Output:

React onMouseUp Event

P

prathamgfg

Improve

Article Tags :

Web Technologies
ReactJS
React Events

Similar Reads

React onPointerDown Event

The onPointerDown event in React fires whenever the pointer (mouse) is down i.e. clicked over the tag or element over which the event has been applied. Similar to other events, we have to provide a function which executes the task or process when the event occurs. Syntax:onPointerMove={function}Para

React onPointerMove Event

The onPointerMove event in React fires whenever the cursor moves inside the tag or element where the event has been applied. Similar to other events, the onPointerMove takes a function which defines the process/task which has to be applied. Syntax:onPointerMove={function}Parameter : function: The fu

React onPointerCancel Event

React onPointerCancel fires when a pointer event cancels, like when someone is zoomed into an image and the user suddenly leaves it, which is a part of the onPointerCancel event. Syntax:onPointerCancel={function}Parameter : function that will call once any pointer event cancels.Return type: event: I

React onMouseUp Event

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

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 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 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 onInput Event

React onInput is an event handler that triggers then there is any change in the input field. It is fired immediately when the user is changing input. It is one of the form events that updates when the input field is modified. It is similar to the HTML DOM oninput event but uses the camelCase convent

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

Corporate & Communications Address:

A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)

Registered Address:

K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305

Advertise with us

Company
About Us
Legal
Privacy Policy
In Media
Contact Us
Advertise with us
GFG Corporate Solution
Placement Training Program

Languages
Python
Java
C++
PHP
GoLang
SQL
R Language
Android Tutorial
Tutorials Archive

DSA
Data Structures
Algorithms
DSA for Beginners
Basic DSA Problems
DSA Roadmap
Top 100 DSA Interview Problems
DSA Roadmap by Sandeep Jain
All Cheat Sheets

Data Science & ML
Data Science With Python
Data Science For Beginner
Machine Learning
ML Maths
Data Visualisation
Pandas
NumPy
NLP
Deep Learning

Web Technologies
HTML
CSS
JavaScript
TypeScript
ReactJS
NextJS
Bootstrap
Web Design

Python Tutorial
Python Programming Examples
Python Projects
Python Tkinter
Python Web Scraping
OpenCV Tutorial
Python Interview Question
Django

Computer Science
Operating Systems
Computer Network
Database Management System
Software Engineering
Digital Logic Design
Engineering Maths
Software Development
Software Testing

DevOps
Git
Linux
AWS
Docker
Kubernetes
Azure
GCP
DevOps Roadmap

System Design
High Level Design
Low Level Design
UML Diagrams
Interview Guide
Design Patterns
OOAD
System Design Bootcamp
Interview Questions

Inteview Preparation
Competitive Programming
Top DS or Algo for CP
Company-Wise Recruitment Process
Company-Wise Preparation
Aptitude Preparation
Puzzles

School Subjects
Mathematics
Physics
Chemistry
Biology
Social Science
English Grammar
Commerce
World GK

GeeksforGeeks Videos
DSA
Python
Java
C++
Web Development
Data Science
CS Subjects

@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy

Improvement

Suggest Changes

Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.

geeksforgeeks-suggest-icon

Create Improvement

Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.

geeksforgeeks-improvement-icon

Suggest Changes

min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences

Admission Experiences

Career Journeys

Work Experiences

Campus Experiences

Competitive Exam Experiences