javascript - Trying to implement Google's Fast Button - Stack Overflow

admin管理员组

文章数量:1296454

I'm trying to implement Google's Fast button for the mobile touch events, and I seem to be stuck. I'm trying to set it up so that I can make links into fastbuttons, but I can't seem to get my library structure right. What ends up happening is the fastbutton re-inits itself when I try to run a for loop on the links.

I'm sure it's just the way I'm setting up the library. Can someone please check it out?

.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 = [];

I'm trying to implement Google's Fast button for the mobile touch events, and I seem to be stuck. I'm trying to set it up so that I can make links into fastbuttons, but I can't seem to get my library structure right. What ends up happening is the fastbutton re-inits itself when I try to run a for loop on the links.

I'm sure it's just the way I'm setting up the library. Can someone please check it out?

http://code.google./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 = [];

• javascript
• dom-events
• mobile-website

Share Follow edited Feb 15, 2022 at 20:51 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jun 9, 2011 at 22:39 MrMaksimizeMrMaksimize 54211 gold badge66 silver badges2020 bronze badges 3

• 10 Thank for putting that code together! I've put it up here on GitHub, and made couple tiny tweaks: github./alexblack/google-fastbutton – waterlooalex Commented Mar 14, 2012 at 16:36
• I have a problem with the handler being called twice on iOS: stackoverflow./questions/14336001/…. – Cotten Commented Jan 15, 2013 at 10:53
• Hi, Is there an way to get the fast buttons to allow the simultaneous pressing of more then one button, like a keyboard where the user uses more then one finger to type. When ever two clicks overlaps only the first input will be accepted. – winthers Commented Apr 23, 2014 at 12:04

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Try calling the constructor with new?

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

本文标签： javascriptTrying to implement Google39s Fast ButtonStack Overflow