React onPointerUp Event

React onPointerMove Event

Last Updated : 24 Jul, 2024

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 function which has to be called when the mouse is moving (hovering) over the specified element.

Return type:

event: 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 move their cursor, and that will fire the event, and the function passed to the event will give an alert that the pointer is moving.

CSS

/*App.css*/
.App {
    min-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 is Moving")
		console.log(event)
	}

	return (
		<div className="App">
			<h1>GeeksforGeeks</h1>
			<h2>Move Pointer inside the shaded region</h2>
			<div className="Shaded" onPointerMove={function1}>
			</div>
		</div>
	);
}
export default App;

Output:

Example 2: In this example, we implemented an area where users can move their cursor. When this occurs, an event will fire and "Pointer is moving" will be printed in the console.

JavaScript

// App.js
import "./App.css"
const App = () => {
	const function1 = (event) => {
		console.log("Pointer is Moving")
	}
	return (
		<div className="App">
			<h1>GeeksforGeeks</h1>
			<h2>Move Pointer inside the shaded region</h2>
			<div className="Shaded" onPointerMove={function1}>
			</div>
		</div>
	);
}
export default App;

Output:

React onPointerUp Event

P

prathamgfg

Improve

Article Tags :

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

React onTouchMove event fires when the user touches and moves the cursor. Similar to other elements in it, we have to pass a function for process execution. It is similar to the HTML DOM ontouchmove event but uses the camelCase convention in React. Syntax:onTouchMove={function}Parameter : function t

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