Triggered after a sustained complete touch event.
The jQuery Mobile taphold event triggers after a sustained, complete touch event (also known as a long press).
$.event.special.tap.tapholdThreshold (default: 750) - This value dictates how long the user must hold their tap before the taphold event is fired on the target element.
$.event.special.tap.emitTapOnTaphold (default: true) - This value dictates whether a tap event will be emitted along with the taphold event.
This plugin extends jQuery's built-in method. If jQuery Mobile is not loaded, calling the .taphold() method may not fail directly, as the method still exists. However, the expected behavior will not occur.
jQuery( ".selector" ).on( "taphold", function( event ) { ... } )
Examples:
A simple example of the capturing and acting upon a taphold event
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>taphold 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.taphold {
background-color: #7ACEF4;
}
</style>
</head>
<body>
<h3>Long press the square for 750 milliseconds to see the above code applied:</h3>
<div class="box"></div>
<script>
$(function(){
$( "div.box" ).bind( "taphold", tapholdHandler );
function tapholdHandler( event ){
$( event.target ).addClass( "taphold" );
}
});
</script>
</body>
</html>
Please login to continue.