Javascript 试图实现Google'；s快速按钮

我正试图实现谷歌的移动触摸事件快速按钮，我似乎被卡住了。我正在尝试设置它，以便我可以将链接设置为快速按钮，但我似乎无法正确设置我的库结构。当我尝试在链接上运行for循环时，最终发生的是fastbutton重新初始化自身

我肯定这就是我建立图书馆的方式。有人能检查一下吗？谢谢

；（功能（）{
/*使用对元素的引用构造FastButton，然后单击handler*/
this.FastButton=函数（元素、处理程序）{
log（'fastbuttoninit'）；
this.element=元素；
this.handler=handler；
console.log（this）；
元素。addEventListener（'touchstart'，this，false）；
元素。addEventListener（'click'，this，false）；
};
/*充当事件调度器*/
this.FastButton.prototype.handleEvent=函数（事件）{
console.log（事件）；
开关（事件类型）{
案例“touchstart”：this.onTouchStart（事件）；break；
案例“touchmove”：this.onTouchMove（事件）；break；
案例“touchend”：this.onClick（事件）；break；
案例“单击”：this.onClick（事件）；break；
}
};
/*保存对touchstart坐标的引用，并开始收听touchmove和
调用stopPropagation可以保证其他行为不会受到影响
处理相同点击事件的机会。这在触摸开始时执行*/
this.FastButton.prototype.onTouchStart=函数（事件）{
event.stopPropagation（）；
this.element.addEventListener（'touchend'，this，false）；
document.body.addEventListener（'touchmove'，this，false）；
this.startX=event.touchs[0].clientX；
this.startY=event.touchs[0].clientY；
};
/*调用touchmove事件时/如果调用touchmove事件，请检查用户是否拖过10px的阈值*/
this.FastButton.prototype.onTouchMove=函数（事件）{
if（Math.abs（event.touch[0].clientX-this.startX）>10||
Math.abs（event.touch[0].clientY-this.startY）>10）{
this.reset（）；//如果他这样做了，则取消触摸事件
}
};
/*如果这是touchend事件，则调用实际的单击处理程序并防止重影单击*/
this.FastButton.prototype.onClick=函数（事件）{
event.stopPropagation（）；
这是reset（）；
this.handler（事件）；
如果（event.type=='touchend'）{
console.log（'touchend'）；
//clickbuster.preventGhostClick（this.startX，this.startY）；
}
};
this.FastButton.prototype.reset=函数（）{
this.element.removeEventListener（'touchend'，this，false）；
document.body.removeEventListener（'touchmove'，this，false）；
};
this.clickbuster=函数（）{
log（'initclickbuster'）；
}
/*调用preventGhostClick以取消25像素内发生的所有单击事件
在接下来的2.5秒内提供的x，y坐标*/
this.clickbuster.preventGhostClick=函数（x，y）{
点击buster.coordinates.push（x，y）；
setTimeout（this.clickbuster.pop，2500）；
};
this.clickbuster.pop=函数（）{
这个.clickbuster.coordinates.splice（0,2）；
};
/*如果我们在给定的半径和时间阈值内捕捉到一个点击事件，那么我们调用
stopPropagation和preventDefault。调用preventDefault将停止链接
从被激活*/
this.clickbuster.onClick=函数（事件）{
对于（变量i=0；i

是否尝试使用new调用构造函数

---

新的快速按钮（el，function（）{}）

谢谢你把代码放在一起！我把它放在GitHub上，并做了一些小小的调整：我在iOS上遇到了两次调用处理程序的问题：。嗨，有没有一种方法可以让快速按钮同时按下一个以上的按钮，就像用户使用一个以上手指打字的键盘一样。当两次单击重叠时，只接受第一次输入。因为FastButton是某个元素id的侦听器。如何将变量传递给函数。示例id=“fastButton”onclick=“doSomething（34）”

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