Permalink
Browse files

Support cleanup and removing of event listeners using new method dest…

…roy() and unFastClick()
  • Loading branch information...
alexblack committed Mar 27, 2012
1 parent c343463 commit 6dd2dd7f415c86f9a9f1789f4e7890ebaa3f142a
Showing with 47 additions and 26 deletions.
  1. +37 −23 google.fastbutton.js
  2. +10 −3 xui.google.fastbutton.js
View
@@ -1,31 +1,47 @@
(function() {
+ /**
+ * From: http://code.this.com/mobile/articles/fast_buttons.html
+ * Also see: http://stackoverflow.com/questions/6300136/trying-to-implement-googles-fast-button
+ */
+
/** For IE8 and earlier compatibility: https://developer.mozilla.org/en/DOM/element.addEventListener */
function addListener(el, type, listener, useCapture) {
- if (el.addEventListener) {
+ if (el.addEventListener) {
el.addEventListener(type, listener, useCapture);
- } else {
- // this was tricky to get working, see: http://stackoverflow.com/questions/5198845/javascript-this-losing-context-in-ie
- el.attachEvent('on' + type, function(e) {
- listener.handleEvent(window.event, listener);
- });
- }
+ return {
+ destroy: function() { el.removeEventListener(type, listener, useCapture); }
+ };
+ } else {
+ // see: http://stackoverflow.com/questions/5198845/javascript-this-losing-context-in-ie
+ var handler = function(e) { listener.handleEvent(window.event, listener); }
+ el.attachEvent('on' + type, handler);
+
+ return {
+ destroy: function() { el.detachEvent('on' + type, handler); }
+ };
+ }
}
- /**
- * From: http://code.this.com/mobile/articles/fast_buttons.html
- * Also see: http://stackoverflow.com/questions/6300136/trying-to-implement-googles-fast-button
- */
-
var isTouch = "ontouchstart" in window;
/* Construct the FastButton with a reference to the element and click handler. */
this.FastButton = function(element, handler, useCapture) {
+ // collect functions to call to cleanup events
+ this.events = [];
+ this.touchEvents = [];
this.element = element;
this.handler = handler;
this.useCapture = useCapture;
if (isTouch)
- addListener(element, 'touchstart', this, this.useCapture);
- addListener(element, 'click', this, this.useCapture);
+ this.events.push(addListener(element, 'touchstart', this, this.useCapture));
+ this.events.push(addListener(element, 'click', this, this.useCapture));
+ };
+
+ /* Remove event handling when no longer needed for this button */
+ this.FastButton.prototype.destroy = function() {
+ for (i = this.events.length - 1; i >= 0; i -= 1)
+ this.events[i].destroy();
+ this.events = this.touchEvents = this.element = this.handler = this.fastButton = null;
};
/* acts as an event dispatcher */
@@ -43,8 +59,8 @@
chance to handle the same click event. This is executed at the beginning of touch. */
this.FastButton.prototype.onTouchStart = function(event) {
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble=true);
- addListener(this.element, 'touchend', this, this.useCapture);
- addListener(document.body, 'touchmove', this, this.useCapture);
+ this.touchEvents.push(addListener(this.element, 'touchend', this, this.useCapture));
+ this.touchEvents.push(addListener(document.body, 'touchmove', this, this.useCapture));
this.startX = event.touches[0].clientX;
this.startY = event.touches[0].clientY;
};
@@ -62,17 +78,15 @@
this.reset();
// Use .call to call the method so that we have the correct "this": https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call
var result = this.handler.call(this.element, event);
- if (event.type == 'touchend') {
- clickbuster.preventGhostClick(this.startX, this.startY);
- }
+ if (event.type == 'touchend')
+ clickbuster.preventGhostClick(this.startX, this.startY);
return result;
};
this.FastButton.prototype.reset = function() {
- if (isTouch) {
- this.element.removeEventListener('touchend', this, this.useCapture);
- document.body.removeEventListener('touchmove', this, this.useCapture);
- }
+ for (i = this.touchEvents.length - 1; i >= 0; i -= 1)
+ this.touchEvents[i].destroy();
+ this.touchEvents = [];
};
this.clickbuster = function() {}
View
@@ -1,8 +1,15 @@
/** Integrate google.fastbutton.js with XUI */
(function(x$) {
- x$.fn.fastClick = function(handler, useCapture) {
- return this.each(function(element ,index, xui) {
- new FastButton(xui[index], handler, useCapture);
+ x$.fn.fastClick = function(handler, useCapture) {
+ return this.each(function(element, index, xui) {
+ element.fastButton = new FastButton(xui[index], handler, useCapture);
+ });
+ }
+
+ x$.fn.unFastClick = function() {
+ return this.each(function(element, index, xui) {
+ element.fastButton.destroy();
+ element.fastButton = null;
});
}
}(xui));

0 comments on commit 6dd2dd7

Please sign in to comment.