Search jQuery

jQuery Forum

jQuery Mobile

ezzuah

Eliminating the 300ms in jquery mobile

in jQuery Mobile • 4 years ago

i'm trying to elminate the 300ms delay in the app, but finding it hard to do

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="jquery/jquery.mobile.icons.min.css"/>
<link rel="stylesheet" type="text/css" href="jquery/newly.css"/>
<link rel="stylesheet" type="text/css" href="jquery/jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="jquery/jquery.mobile-1.4.5.js"></script>
<script language="javascript">
$.event.special.tap = {
setup: function() {
var self = this,
$self = $(self);
$self.on('touchstart', function(startEvent) {
var target = startEvent.target;
$self.one('touchend', function(endEvent) {
if (target == endEvent.target) {
$.event.simulate('tap', self, endEvent);
}
});
});
}
};
$('#no-tap-delay').on('tap', function() {
var $self = $(this);
});
</script>
<style>
.html5logo {
display: block;
width: 128px;
height: 128px;
background: url(imgs/love.png) no-repeat;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.html5logo:active {
-webkit-transform: scale3d(0.9, 0.9, 1);
}
.pulse {
-webkit-animation: pulse 400ms;
}
@-webkit-keyframes pulse {
0% { -webkit-transform: scale3d(0.9,0,9,1); }
20% { -webkit-transform: scale3d(1.1,1.1,1); }
40% { -webkit-transform: scale3d(0.95,0.95,1); }
70% { -webkit-transform: scale3d(1.05,1.05,1); }
100% { -webkit-transform: scale3d(1,1,1); }
}
</style>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content"><a id="no-tap-delay"
class="html5logo"
href="#page2"></a>
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
<p> 
<div data-role="page" id="page2">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content"><a href="#page">back to page1</a></div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
</body>
</html>

when i click on the link the 300ms still works out

Replies(1)

watusiware

Re: Eliminating the 300ms in jquery mobile

4 years ago

First off, your code doesn't do anything.

$('#no-tap-delay').on('tap', function() {
var $self = $(this);
});

You need to actually do something on line 3. I'd suggest logging to the console for now:

console.log('I was tapped');

As well, you're trying too hard - you don't need your touchstart/touchend code. And it won't work on all browsers. IF your code worked, it would only work on those browsers with touchscreen AND that use touchstart /touchend. That leaves out Microsoft browsers and all desktop browsers.

$('#no-tap-delay').on('vclick', function() {

console.log('I was tapped');

});

This will work on all browsers.

If you want faster yet, you can use vmousedown. It will fire on first touch, or start of click, rather than when the user lifts their finger or end of click.

BTW, most current-version devices have eliminated the 300mSec delay in most cases, so this is largely a non-issue for users with updated OSs. What device/OS/version are you using? I've started a new project, and haven't bothered using vclick/vmousedown as I have in the past.

Top Reply

Response title

Attachments

jQuery Forum

Eliminating the 300ms in jquery mobile

Replies(1)

Re: Eliminating the 300ms in jquery mobile

Statistics

Tags

Actions

Related Posts