React onTouchEnd Event Last Updated : 23 Jul, 2025 Comments Improve Suggest changes Like Article Like Report 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 : function that will call once the user touches and releases screen.Return type:event: It is an event object containing information about the event like target element and valuesExample 1 : In this example we implemented TouchEnd area where user touch and release then event fires and display a message in console. 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 End Fires!") } return ( <div className="App"> <h1>GeeksforGeeks</h1> <h2>Touch and Release to fire Event</h2> <div className="Shaded" onTouchEnd={function1}> </div> </div> ); } export default App; Output : Example 2 : In this example, we implemented an area where the user, when touch and release, will get an alert 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) => { alert("Touch End Fires!") } return ( <div className="App"> <h1>GeeksforGeeks</h1> <h2>Touch and Release to fire Event</h2> <div className="Shaded" onTouchEnd={function1}> </div> </div> ); } export default App; Output: Comment More infoAdvertise with us Next Article Company-wise Practice Problems P prathamgfg Follow Improve Article Tags : Web Technologies ReactJS React Events Similar Reads Interview PreparationInterview Preparation For Software DevelopersMust Coding Questions - Company-wise Must Do Coding Questions - Topic-wiseCompany-wise Practice ProblemsCompany PreparationCompetitive ProgrammingSoftware Design-PatternsCompany-wise Interview ExperienceExperienced - Interview ExperiencesInternship - Interview ExperiencesPractice @GeeksforgeeksProblem of the DayTopic-wise PracticeDifficulty Level - SchoolDifficulty Level - BasicDifficulty Level - EasyDifficulty Level - MediumDifficulty Level - HardLeaderboard !!Explore More...Data StructuresArraysLinked ListStackQueueBinary TreeBinary Search TreeHeapHashingGraphAdvance Data StructuresMatrixStringAll Data StructuresAlgorithmsAnalysis of AlgorithmsSearching AlgorithmsSorting AlgorithmsPattern SearchingGeometric AlgorithmsMathematical AlgorithmsRandomized AlgorithmsGreedy AlgorithmsDynamic ProgrammingDivide & ConquerBacktrackingBranch & BoundAll AlgorithmsProgramming LanguagesCC++JavaPythonC#Go LangSQLPHPScalaPerlKotlinWeb TechnologiesHTMLCSSJavaScriptBootstrapTailwind CSSAngularJSReactJSjQueryNodeJSPHPWeb DesignWeb BrowserFile FormatsComputer Science SubjectsOperating SystemsDBMSComputer NetworkComputer Organization & ArchitectureTOCCompiler DesignDigital Elec. & Logic DesignSoftware EngineeringEngineering MathematicsData Science & MLComplete Data Science CourseData Science TutorialMachine Learning TutorialDeep Learning TutorialNLP TutorialMachine Learning ProjectsData Analysis TutorialTutorial LibraryPython TutorialDjango TutorialPandas TutorialKivy TutorialTkinter TutorialOpenCV TutorialSelenium TutorialGATE CSGATE CS NotesGate CornerPrevious Year GATE PapersLast Minute Notes (LMNs)Important Topic For GATE CSGATE CoursePrevious Year Paper: CS exams Like