左滑的手势事件的一种简单实现

左滑的手势事件的一种简单实现

专题里面的, 因为需要一个左滑的函数,但是有不想因为仅仅显示一个左滑的事件就重新引入一个大大的插件(touch.js , 当然插件本身是很优秀的).于是自己写了一段.

仅供参考

😃

(function(){
  // touch事件, 左滑屏事件.part3->part2转场 (回场)
  var part3=document.querySelector(".part3");
  part3.addEventListener("touchstart",function(ev){

    var startClientX=null,startClientY=null,
    endClientX=null,endClientY=null;

    startClientX=ev.touches[0].clientX;
    startClientY=ev.touches[0].clientY;




    part3.addEventListener("touchend",function(eve){
      // console.log(ev);

      endClientX=eve.changedTouches[0].pageX;
      endClientY=eve.changedTouches[0].pageY;


      var xdis = endClientX - startClientX;
      var ydis = endClientY - startClientY;

      // xdis <0 ->左移  // xdis >0 ->右移
      // console.log("xdis = "+xdis);

      //几个条件限制来控制 ->确定是左滑
      if (xdis<0 && Math.abs(xdis)>50 &&Math.abs(xdis)>Math.abs(ydis) ) {

        console.log("startClientX = "+startClientX);
        console.log("startClientY= "+startClientY);
        console.log("endClientX= "+endClientX);
        console.log("endClientY= "+endClientY);
        console.log("xdis = "+xdis);


        //part3 退场
        $(".registerDiv, .part3-login").animateCss("bounceOutRight");

        $(".part3").fadeOut(1200);

        //part2 进场
        $(".part2").fadeIn(500);
        $(".vedioPart, .JionDriverBtnIcon , .JionDriverBtn").show();
        $(".vedioPart, .JionDriverBtnIcon , .JionDriverBtn").animateCss("bounceInLeft");


        console.log("<--------");
      };

      startClientX=null;
      startClientY=null;
      endClientX=null;
      endClientY=null;
    },false);//touchend Event
  },false);//touchstart Event

})();

基本思想很简单:

对touchstart和touchend事件 进行监听,获取其的坐标, 然后进行判断是左移还是右移.

需要注意的是

• 对touchstart和touchend事件 要在同一次触发中.

• 第二个需要注意的地方时, 记得在最后的时候 重置一下.

by wanglinzhizhi

😃