By continuing to navigate on this website, you accept the use of cookies to serve you more relevant services & content.
For more information and to change the setting of cookies on your computer, please read our Cookie Policy.

How to use jQuery mobile touch events

What is an Event?

Event is nothing but all possible and different actions of visitor's that a webpage can respond to. We have the ability to create dynamic web pages by using events. In general, Events are actions that can be detected by our Web Application.

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

Events handling and manipulating are different for mouse and touch events.

jQuery Mobile Touch Events:

Touch events are nothing but the actions that are performed when user touches the screen.

Following events list are some of the touch events which are supported by the jQuery Mobile:

  1. Tap event - Fires when user tap on an element.
  2. Taphold event -  Fires when user tap on an element and hold for couple of seconds.
  3. Swipe event - Fires when user horizontally drag more than 30px over an element.
  4. Swipeleft event - Fires when user drag more than 30px over an element in the left direction.
  5. Swiperight event - Fires when user drag more than 30px over an element in the right direction.

1. Tap event:

The tap event is triggered when the user taps on an element.

The below example describes use of tap event in the jQuery Mobile Framework:
The following example says: When a tap event fires on a <p> element; hide the current <p> element:

<!DOCTYPE html>
<head>
<title>Tap Event</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://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>

 

2. Taphold event:

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

The below example describes use of taphold event in the jQuery Mobile Framework:

Using the above eaxmple we will replace the tap event to taphold event to take effect.

<!DOCTYPE html>
<head>
<title>Taphold Event</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecreate","#page1",function(){
  $("p").on("taphold",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>

 

3. Swipe event:

The swipe event is triggered when the user drag horizontally by more than 30px over an element by using id of the page to specify event and on() method attaches the event handlers.

The below example describes use of swipe event in the jQuery Mobile Framework:

<!DOCTYPE html>
<head>
<title>Swipe Event</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecreate","#page1",function(){
  $("p").on("swipe",function(){
    $("span").text("swipe event occurred!!!");
  });
});
</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>It will display the text when you swipe here.</p>
    <span style="color:orange"></span>
  </div>

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

 

4. Swipeleft event:

The swipeleft event is triggered when user drag more than 30px over an element in the left direction by using id of the page to specify event and on() method attaches the event handlers.

The below example describes use of swipeleft event in the jQuery Mobile Framework:

<!DOCTYPE html>
<head>
<title>Swipeleft Event</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecreate","#page1",function(){
  $("p").on("swipeleft",function(){
    $("span").text("swipe event occurred!!!");
  });
});
</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>It will display the text when you swipe left side.</p>
    <span style="color:orange"></span>
  </div>

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

 

5. Swiperight event:

The swiperight event is triggered when user drag more than 30px over an element in the right direction by using id of the page to specify event and on() method attaches the event handlers.

The below example describes use of swiperight event in the jQuery Mobile Framework:

<!DOCTYPE html>
<head>
<title>Swiperight Event</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecreate","#page1",function(){
  $("p").on("swiperight",function(){
    $("span").text("swipe event occurred!!!");
  });
});
</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>It will display the text when you swipe right side.</p>
    <span style="color:orange"></span>
  </div>

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

To Know more about our Django CRM(Customer Relationship Management) Open Source Package. Check Code

    Posted On
  • 11 May 2017
  • By
  • Micropyramid

Need any Help in your Project?Let's Talk

Latest Comments
Related Articles
Image Cropping in Jquery (with Jcrop)

We are having many image cropping plugins developed in jquery that are being used to crop an image. Jcrop is one of the plugins developed ...

Continue Reading...
Tracking your Product Sales, Views and Searches with Google Enhanced E-commerce Analytics

Enhanced E-commerce helps improving tracking of an ecommerce website. It gives Statistics in variable measurements. It is not be used alongside analytics plugin, as this ...

Continue Reading...
Get tweets with Javascript

Due to change in twitter API, its been hard to get tweets from twitter to your site using javascript. We got new API version 1.1 ...

Continue Reading...
open source packages

Subscribe To our news letter

Subscribe and Stay Updated about our Webinars, news and articles on Django, Python, Machine Learning, Amazon Web Services, DevOps, Salesforce, ReactJS, AngularJS, React Native.
* We don't provide your email contact details to any third parties