Triggered after a quick, complete touch event.
The jQuery Mobile tap event triggers after a quick, complete touch event that occurs on a single target object. It is the gesture equivalent of a standard click event that is triggered on the release state of the touch gesture.
This plugin extends jQuery's built-in method. If jQuery Mobile is not loaded, calling the .tap() method may not fail directly, as the method still exists. However, the expected behavior will not occur.
Warning: Use tap with caution
Tap makes use of vclick and therefore should be used with caution on touch devices. See the vclick API documentation for more details.
jQuery( ".selector" ).on( "tap", function( event ) { ... } )
Examples:
A simple example of the capturing and acting upon a tap event
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>tap demo</title>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
html, body { padding: 0; margin: 0; }
html, .ui-mobile, .ui-mobile body {
height: 85px;
}
.ui-mobile, .ui-mobile .ui-page {
min-height: 85px;
}
#nav {
font-size: 200%;
width:17.1875em;
margin:17px auto 0 auto;
}
#nav a {
color: #777;
border: 2px solid #777;
background-color: #ccc;
padding: 0.2em 0.6em;
text-decoration: none;
float: left;
margin-right: 0.3em;
}
#nav a:hover {
color: #999;
border-color: #999;
background: #eee;
}
#nav a.selected,
#nav a.selected:hover {
color: #0a0;
border-color: #0a0;
background: #afa;
}
div.box {
width: 3em;
height: 3em;
background-color: #108040;
}
div.box.tap {
background-color: #7ACEF4;
}
</style>
</head>
<body>
<h3>Tap the green square to see the above code applied:</h3>
<div class="box"></div>
<script>
$(function(){
$( "div.box" ).bind( "tap", tapHandler );
function tapHandler( event ){
$( event.target ).addClass( "tap" );
}
});
</script>
</body>
</html>
Please login to continue.