如何解决尝试实现Google的“快速按钮”
| 我正在尝试为移动触摸事件实现Google的“快速”按钮,但我似乎陷入了困境。我正在尝试进行设置,以便可以将链接链接到快速按钮,但是我似乎无法正确设置库结构。最终发生的是,当我尝试在链接上运行for循环时,fastbutton会自动重新初始化。 我确定这只是我设置资料库的方式。有人可以检查一下吗?谢谢! 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\',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\',false);
document.body.addEventListener(\'touchmove\',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\',false);
document.body.removeEventListener(\'touchmove\',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 = [];
解决方法
尝试使用new调用构造函数吗?
新的FastButton(el,function(){});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。