How to use jQuery mobile touch events

Reading Time : ~ .

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>

 

    By Posted On
SENIOR DEVELOPER at MICROPYRAMID

Need any Help in your Project?Let's Talk

Latest Comments
Related Articles
Using CasperJS to scrape website data Jagadeesh V

CasperJS can be used for Navigation Scipting, Scraping and testing. In this Tutorial we will see how to scrape data from website using CasperJS and ...

Continue Reading...
Event Delegation in Jquery Ashwin Kumar

Event handling is the basic need to develop Rich Internet Web Applications and that will become very tough with elements added to DOM dynamically. Jquery ...

Continue Reading...
Get tweets with Javascript Ashwin Kumar

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

Subscribe To our news letter

Subscribe to our news letter to receive latest blog posts into your inbox. Please fill your email address in the below form.
*We don't provide your email contact details to any third parties