React onChange Event

React onTouchCancel Event

Last Updated : 26 Jul, 2024

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 touch interrupts.

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 the TouchCancel area. If the user interrupts their touch inside the area, they will get a message on the console through the 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) => {
		console.log("Touch Cancel Fires!")
	}
	return (
		<div className="App">
			<h1>GeeksforGeeks</h1>
			<h2>Touch and cancel your touch to fire event</h2>
			<div className="Shaded" onTouchCancel={function1}>
			</div>
		</div>
	);
}
export default App;

Output :

on-touch-cancel-1

Example 2 : In this example, we implemented an area where when user interrupts there touch user will get a alert message that TouchCancel 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) => {
		alert("Touch Cancel Event Fires!")
	}
	return (
		<div className="App">
			<h1>GeeksforGeeks</h1>
			<h2>Interrupt your touch to fire Event</h2>
			<div className="Shaded" onTouchCancel={function1}>
			</div>
		</div>
	);
}
export default App;

Output:

on-touch-cancel-2

React onChange 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 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 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 tha

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

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

The onClick event in React is used for handling a function when an element, such as a button, div, or any clickable element, is clicked.SyntaxonClick={handleClick}ParameterThe callback function handleClick which is invoked when onClick event is triggeredReturn TypeIt is an event object containing in

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

The onDoubleClick event in React is a native DOM event that triggers when the user double-clicks on an element, typically using the left mouse button. This event is part of a group of mouse events that React handles, including onClick, onMouseDown, onMouseUp, and others.onDoubleClick occurs when a m