How to Use JQuery Mobile Touch Events
What is an Event?
Event is nothing but all possible and different actions of visitors 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 actions that are performed when the user touches the screen.
The following events list are some of the touch events which are supported by jQuery Mobile:
- Tap event — Fires when the user taps on an element.
- Taphold event — Fires when the user taps on an element and holds for a couple of seconds.
- Swipe event — Fires when the user horizontally drags more than 30px over an element.
- Swipeleft event — Fires when the user drags more than 30px over an element in the left direction.
- Swiperight event — Fires when the user drags 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 the use of the 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 the user taps on an element and hold for a couple of seconds by using the id of the page to specify the event and on() the method attaches the event handlers.
The below example describes the use of taphold event in the jQuery Mobile Framework:
Using the above example 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 drags horizontally by more than 30px over an element by using the id of the page to specify the event and the on() method attaches the event handlers.
The below example describes the 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 the user drag more than 30px over an element in the left direction by using the id of the page to specify the event and the on() method attaches the event handlers.
The below example describes the 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 the user drags more than 30px over an element in the right direction by using the id of the page to specify the event and the on() method attaches the event handlers.
The below example describes the 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
