Essayer de mettre en œuvre le bouton rapide de Google

Question

J'essaie d'implémenter le bouton rapide de Google pour les événements tactiles mobiles, et je semble être bloqué. J'essaye de le configurer pour que je puisse faire des liens dans fastbuttons, mais je n'arrive pas à avoir la structure de ma bibliothèque correctement. Ce qui finit par se produire, c'est que le bouton se ré-initialise lui-même lorsque j'essaie d'exécuter une boucle for sur les liens.

Je suis sûr que c'est juste la façon dont je configure la bibliothèque. quelqu'un peut-il vérifier s'il vous plaît? Merci!

http://code.google.com/mobile/articles/fast_buttons.html

;(function() { 
/*Construct the FastButton with a reference to the element and click handler.*/ 
this.FastButton = function(element, handler) { 
    console.log('fastbutton init'); 
    this.element = element; 
    this.handler = handler; 
    console.log(this); 
    element.addEventListener('touchstart', this, false); 
    element.addEventListener('click', this, false); 
}; 

/*acts as an event dispatcher*/ 
this.FastButton.prototype.handleEvent = function(event) { 
    console.log(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; 
    } 
}; 

/*Save a reference to the touchstart coordinate and start listening to touchmove and 
touchend events. Calling stopPropagation guarantees that other behaviors don’t get a 
chance to handle the same click event. This is executed at the beginning of touch.*/ 
this.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; 
}; 

/*When /if touchmove event is invoked, check if the user has dragged past the threshold of 10px.*/ 
this.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(); //if he did, then cancel the touch event 
    } 
}; 

/*Invoke the actual click handler and prevent ghost clicks if this was a touchend event.*/ 
this.FastButton.prototype.onClick = function(event) { 
    event.stopPropagation(); 
    this.reset(); 
    this.handler(event); 
    if (event.type == 'touchend') { 
     console.log('touchend'); 
     //clickbuster.preventGhostClick(this.startX, this.startY); 
    } 
}; 

this.FastButton.prototype.reset = function() { 
    this.element.removeEventListener('touchend', this, false); 
    document.body.removeEventListener('touchmove', this, false); 
}; 

this.clickbuster = function() { 
    console.log('init clickbuster'); 
} 
/*Call preventGhostClick to bust all click events that happen within 25px of 
the provided x, y coordinates in the next 2.5s.*/ 
this.clickbuster.preventGhostClick = function(x, y) { 
clickbuster.coordinates.push(x, y); 
window.setTimeout(this.clickbuster.pop, 2500); 
}; 

this.clickbuster.pop = function() { 
this.clickbuster.coordinates.splice(0, 2); 
}; 
/*If we catch a click event inside the given radius and time threshold then we call 
stopPropagation and preventDefault. Calling preventDefault will stop links 
from being activated.*/ 
this.clickbuster.onClick = function(event) { 
for (var i = 0; i < clickbuster.coordinates.length; i += 2) { 
console.log(this); 
    var x = clickbuster.coordinates[i]; 
    var y = clickbuster.coordinates[i + 1]; 
    if (Math.abs(event.clientX - x) < 25 && Math.abs(event.clientY - y) < 25) { 
     event.stopPropagation(); 
     event.preventDefault(); 
    } 
} 
}; 

})(this); 



document.addEventListener('click', clickbuster.onClick, true); 
clickbuster.coordinates = []; 

Answer 1

Essayez d'appeler le constructeur avec la nouvelle?

nouveau FastButton (el, function() {});