Advertisement
photokandy

Clickbuster/iScroll click prevention

Feb 4th, 2012
2,264
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /**
  2.  *
  3.  * "Fast Buttons" / Ghost Click Buster.
  4.  * Based on http://code.google.com/intl/en/mobile/articles/fast_buttons.html
  5.  *
  6.  *
  7.  */
  8. //
  9. // START CLICKBUSTER
  10. //
  11.  
  12. var clickPointX = Array();                                          // PRIVATE:  last X coordinate of a touch
  13. var clickPointY = Array();                                          // PRIVATE:  last Y coordiante of a touch
  14.  
  15. /**
  16.  *
  17.  * add a click to the clickPointX/Y array. if nopop is specified, no timeout is set to clear the click.
  18.  *
  19.  * @param x     x-coordinate
  20.  * @param y     y-coordinate
  21.  * @param nopop if not specified, or FALSE, the coordinate is removed from the array after 5s. if TRUE, remains
  22.  *              there forever.
  23.  */
  24. function addClick ( x, y, nopop )
  25. {
  26.     clickPointX.push (x);
  27.     clickPointY.push (y);
  28.     if (!nopop)
  29.     {
  30.         setTimeout (popClick, 5000)
  31.     }
  32. }
  33.  
  34. /**
  35.  *
  36.  * Removes the first item off the clickPointX/Y array.
  37.  *
  38.  */
  39. function popClick ()
  40. {
  41.     clickPointX.splice(0,1);
  42.     clickPointY.splice(0,1);
  43. }
  44.  
  45. /**
  46.  *
  47.  * Determines if a click is within 15 pixels of a previous click in the clickPointX/Y array.
  48.  * If it is, it is added to via addClick. Returns TRUE if the click SHOULD BE IGNORED;
  49.  * false if it is not to be ignored.
  50.  *
  51.  * @param x     x-coordinate
  52.  * @param y     y-coordinate
  53.  * @param nopop no use here; passed on to addclick
  54.  *
  55.  */
  56. function ignoreClick (x, y, nopop)
  57. {
  58.     for (var i=0;i<clickPointX.length;i++)
  59.     {
  60.         var testX = clickPointX[i];
  61.         var testY = clickPointY[i];
  62.         if ( ( Math.abs(x - testX) < 15 ) && ( Math.abs(y - testY) < 15 ) )
  63.         {
  64.             return true;
  65.         }
  66.     }
  67.     addClick (x, y, nopop);
  68.     return false;
  69. }
  70.  
  71. /**
  72.  *
  73.  * Attached to the document in order to prevent duplicate clicks from occuring.
  74.  * iOS' webkit has a nasty habit of throwing duplicate onClick events. Not good.
  75.  *
  76.  * Also prevents (or tries to) a click if the scrollers are in movement.
  77.  */
  78. function clickBuster (event)
  79. {
  80.     console.log ("Clicked " + event.clientX + ", " + event.clientY );
  81.     if (ignoreClick(event.clientX, event.clientY) || isScrolling())
  82.     {
  83.         console.log ("... and ignored it.");
  84.         setTimeout ( function() { sbScrolling=Array(false, false); console.log ("Nuked scrolling."); }, 1000 );
  85.         event.stopPropagation();
  86.         event.preventDefault();
  87.     }
  88. }
  89.  
  90. document.addEventListener ( 'click', clickBuster, true );
  91.  
  92. //
  93. // END CLICKBUSTER
  94. //
  95.  
  96.  
  97.  
  98. var sbScrolling = Array(false, false);                              // PUBLIC:  indicate if a scroller is scrolling.
  99.  
  100. //
  101. // BEGIN SCROLLING STUFF
  102. //
  103. var scrollingTimeout;
  104. function handleScrolling ( me, e, scrolling )
  105. {
  106.     // first, set who is or is not scrolling.
  107.     if (scrolling)
  108.     {
  109.         sbScrolling[me.whichScrollerAmI] = scrolling;
  110.         console.log ( 'Scrolling for ' + me.whichScrollerAmI + ' is ' + scrolling );
  111.     }
  112.     else
  113.     {
  114.         // reset me in a few ms.
  115.         if (scrollingTimeout)
  116.         {
  117.             clearTimeout (scrollingTimeout);
  118.         }
  119.         scrollingTimeout = setTimeout ( function() {
  120.             sbScrolling[me.whichScrollerAmI] = false;
  121.             console.log ( 'Scrolling for ' + me.whichScrollerAmI + ' is false' );
  122.         }, 1000 );
  123.     }
  124.    
  125.     // next, do we have an event? if so, add it as a click
  126.     if (e)
  127.     {
  128.         console.log ( e );
  129.         addClick(e.touches[0].clientX, e.touches[0].clientY);
  130.     }
  131.    
  132.  
  133. }
  134.  
  135.  
  136. /**
  137.  *
  138.  * isScrolling will return TRUE if any scroller has indicated it is in a scrolling state, and
  139.  * FALSE if no scroller is scrolling.
  140.  *
  141.  */
  142. function isScrolling()
  143. {
  144.     return sbScrolling[0] || sbScrolling[1];
  145. }
  146.  
  147. // and init a new scroller like this
  148. scroller = new iScroll ( element, { onScrollMove: function(me) {handleScrolling(this,null, true);},
  149.                                     onScrollEnd:  function(me) {handleScrolling(this,null, false);}
  150.                                   } );
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement