js原生实现FastClick事件的实例

注明：本人学习javascript时间不长，最近一直在做web端的手机网页和微信应用，由于最近有用到类似fastclick的功能，在原来的程序中用touchstart和touchend事件模拟，现在尝试将其封装，得到了以下两种有问题的方案。分享给大家，另求大神指导

在手机端Web app开发中，click事件的300ms的延迟，会造成响应缓慢，尤其在低端机中尤为明显。而使用touchstart或者touchend事件，会和默认的滚轮事件发生冲突，这也不是我们所期望的。

所以，自己动手，丰衣足食，写了一个快速点击事件的原生js代码(考虑到web app开发的环境，我们暂时无需考虑对IE等浏览器的兼容)。

实现方法1如下：

function FastClickEvent(handler){  var fastclick = {    handler : handler,    bind : function(query){      var targetList = document.querySelectorAll(query);      for(var i=0,len=targetList.length;i<len;i++)      {        targetList[i].addEventListener('touchstart',handleEvent);        targetList[i].addEventListener('touchend',handleEvent);      }    },    unbind : function(query){      var targetList = document.querySelectorAll(query);      for(var i=0,len=targetList.length;i<len;i++)      {        targetList[i].removeEventListener('touchstart',handleEvent);        targetList[i].removeEventListener('touchend',handleEvent);      }    }    }  var touchX = 0 ,touchY = 0;  function handleEvent(event){    switch(event.type)    {      case 'touchstart':        touchX = event.touches[0].clientX;        touchY = event.touches[0].clientY;        break;      case 'touchend':        var x = event.changedTouches[0].clientX;        var y = event.changedTouches[0].clientY;        if(Math.abs(touchX-x)<5||Math.abs(touchY-y)<5)          fastclick.handler(event);        break;    }  };  return fastclick;};

原理：根据连续touchstart和touchend事件发生时位置的变化，来判断是否是一次点击

调用：用一个handler函数来注册一个FastClickEvent事件。然后将注册好的FastClickEvent事件,通过bind方法，绑定到对应的元素上去。如下：

var handler = function(event){  console.log(event.target.id+" fastclicked");}var fastClick = new FastClickEvent(handler);fastClick.bind("div");

这段代码，我们给所有的div元素注册了fastclick的handler事件。调用fastClick.unbind来解除元素的绑定。

但是这段代码有一个问题，为了让handleEvent事件能够访问到touchX，touchY。我采用了闭包的手法，这意味着每次new一个FastClickEvent事件对象，都要在内存中再次注入重复的handleEvent函数。至于重复的touchX，touchY，更是不必多说了。

新手求助：原本是想把handleEvent函数写到原型里，但是产生的一个问题是handleEvent(event)的this对象是windows，也就是说，我取不到touchX和touchY以及handler对象，造成访问错误。