React onMouseMove Event

React onTouchMove Event

Last Updated : 25 Jul, 2024

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 that will call once the user touch and moves any part of an element or tag.

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 a TouchMove area in it where when user touch and move it will gives an alert through function.

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("Touch and Move Start")
	}
	return (
		<div className="App">
			<h1>GeeksforGeeks</h1>
			<h2>Touch and move inside Shaded Region</h2>
			<div className="Shaded" onTouchMove={function1}>
			</div>
		</div>
	);
}
export default App;

Output :

Example 2 : In this example, we implemented an area where the user, when touch and move, will get an message in console that a touch event is fired.

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) => {
		console.log("Touch and Move Start")
	}
	return (
		<div className="App">
			<h1>GeeksforGeeks</h1>
			<h2>Touch and Move inside Shaded Region</h2>
			<div className="Shaded" onTouchStart={function1}>
			</div>
		</div>
	);
}
export default App;

Output:

React onMouseMove Event

P

prathamgfg

Improve

Article Tags :

Similar Reads

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

React onTouchCancel Event

React onTouchCancel event fires when touch interrupts. Similar to other elements in it, we have to pass a function for process execution. It is similar to the HTML DOM touchcancel event but uses the camelCase convention in React.Syntax:onTouchCancel={function}Parameter : function that will call when

React onTouchStart Event

React onTouchStart event fires when the user touches one or more points in the element or tag. Similar to other elements in it, we have to pass a function for process execution.It is similar to the HTML DOM ontouchstart event but uses the camelCase convention in React.Syntax:onTouchStart={function}P

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 fun

React onChange Event

React onChange is an event handler that triggers when there is any change in the input field. This event captures the changes in an Input Field and executes the handler function. It is fired when the input field is modified and loses focus. It is one of the form events that updates when the input fi

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

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