Tutorials
Einige nützliche Hilfen und Code-Schnipsel, die ich immer wieder benötige und deshalb hier für alle sammle.
Zurück zur Übersicht
HOW TO: Entferne die 300ms Zeitverzögerung wenn man einen Link in JQuery Mobile anklickt
#Tutorials#Javascript
Hier zeige ich euch, wie ihr die nervigen 300ms Zeitverzögerung umgeht, die in jQuerymobile alles träge wirken lassen.
1.Erstellt eine Datei namens fastclick.js und fügt folgendes ein:
function FastButton(element, handler) {
this.element = element;
this.handler = handler;
element.addEventListener('touchstart', this, false);
};
FastButton.prototype.handleEvent = function(event) {
switch (event.type) {
case 'touchstart': this.onTouchStart(event); break;
case 'touchmove': this.onTouchMove(event); break;
case 'touchend': this.onClick(event); break;
case 'click': this.onClick(event); break;
}
};
FastButton.prototype.onTouchStart = function(event) {
event.stopPropagation();
this.element.addEventListener('touchend', this, false);
document.body.addEventListener('touchmove', this, false);
this.startX = event.touches[0].clientX;
this.startY = event.touches[0].clientY;
isMoving = false;
};
FastButton.prototype.onTouchMove = function(event) {
if(Math.abs(event.touches[0].clientX - this.startX) > 10 || Math.abs(event.touches[0].clientY - this.startY) > 10) {
this.reset();
}
};
FastButton.prototype.onClick = function(event) {
this.reset();
this.handler(event);
if(event.type == 'touchend') {
preventGhostClick(this.startX, this.startY);
}
};
FastButton.prototype.reset = function() {
this.element.removeEventListener('touchend', this, false);
document.body.removeEventListener('touchmove', this, false);
};
function preventGhostClick(x, y) {
coordinates.push(x, y);
window.setTimeout(gpop, 2500);
};
function gpop() {
coordinates.splice(0, 2);
};
function gonClick(event) {
for(var i = 0; i < coordinates.length; i += 2) {
var x = coordinates[i];
var y = coordinates[i + 1];
if(Math.abs(event.clientX - x) < 25 && Math.abs(event.clientY - y) < 25) {
event.stopPropagation();
event.preventDefault();
}
}
};
document.addEventListener('click', gonClick, true);
var coordinates = [];
function initFastButtons() {
new FastButton(document.getElementById("fastclick"), goSomewhere);
};
function goSomewhere() {
var theTarget = document.elementFromPoint(this.startX, this.startY);
if(theTarget.nodeType == 3) theTarget = theTarget.parentNode;
var theEvent = document.createEvent('MouseEvents');
theEvent.initEvent('click', true, true);
theTarget.dispatchEvent(theEvent);
};
2. Nun in eurer jquery mobile index.html datei folgendes in den head-Bereich
<head>
<!-- your css links go here -->
<script src="scripts/jquery-1.6.4.min.js"></script>
<script src="scripts/jquery.mobile-1.0.1.min.js"></script>
<script src="scripts/phonegap-1.3.0.js"></script> <!-- for us phonegap users -->
<script src="scripts/fastclick.js"></script>
<link rel='stylesheet' id='nextgen_gallery_related_images-css' href='http://andreknieriem.de/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/nextgen_gallery_display/static/nextgen_gallery_related_images.css?ver=3.7.1' type='text/css' media='all' />
<link rel='stylesheet' id='admin-bar-css' href='http://andreknieriem.de/wp-includes/css/admin-bar.min.css?ver=3.7.1' type='text/css' media='all' />
<link rel='stylesheet' id='wpv_render_css-css' href='http://andreknieriem.de/wp-content/plugins/wp-views/res/css/wpv-views-sorting.css?ver=3.7.1' type='text/css' media='all' />
</head>
3. Nun das Ganze beim Seitenladen aufrufen:
<body onload="initFastButtons();">
4. Nun noch ein span mit der id "fastclick" um den kompletten body legen und fertig!
<body onload"initFastButtons();">
<span id="fastclick">
<div data-role="page" id="one" style="overflow-x:hidden;">
<div data-role="header" data-id="myheader" data-position="inline">
......
</span> <!-- end fastclick -->
Fertig, nun sollte sich alles viel schneller und nativer anfühlen!
Original code from this thread: https://forum.jquery.com/topic/google-s-fastbutton
Kommentare
Hinterlasse einen Kommentar