jQuery Mobile - Touch Taphold Event

Description

Fires when the user taps on an element and holds for a couple of seconds using id of the page to specify an event and on() method attaches the event handlers.

Example

Following example describes the use of taphold event in the jQuery Mobile Framework.

Live Demo

<!DOCTYPE html>
   <head>
      <title>Taphold Event</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
      
      <script>
         $(document).on("pagecreate","#page1",function() {
            $("p").on("tap",function() {
               $(this).hide();
            });
         });
      </script>
   </head>
   
   <body>
      <div data-role = "page" id = "page1">
         <div data-role = "header">
            <h2>Header</h2>
         </div>

         <div data-role = "main" class = "ui-content">
            <p>This line will disappear, if you tap on it.</p>
         </div>

         <div data-role = "footer">
            <h2>Footer</h2>
         </div>

      </div>
   </body>
</html>

Output

Let's carry out the following steps to see how the above code works −

Save the above html code as jqm_touch_taphold_event.html file in your server root folder.
Open this HTML file as http://localhost/jqm_touch_taphold_event.html and the following output will be displayed.

jquery_mobile_events.htm

Kickstart Your Career

Get certified by completing the course

Get Started