手机触摸屏的JS事件

Javascript 1652 0 2014-09-07

手机触摸屏的JS事件
处理Touch事件能让你跟踪用户的每一根手指的位置。你可以绑定以下四种Touch事件:
1
2
3
4
touchstart:  // 手指放到屏幕上的时候触发
touchmove:  // 手指在屏幕上移动的时候触发
touchend:  // 手指从屏幕上拿起的时候触发
touchcancel:  // 系统取消touch事件的时候触发。至于系统什么时候会取消,不详

在开始描述touch事件之前,需要先描述一下多触式系统中特有的touch对象(android和iOS乃至nokia最新 的meego系统都模拟了类似的对象,这里只针对iOS,因为我只有iPad可用于测试。。)。这个对象封装一次 屏幕触摸,一般来自于手指。它在touch事件触发的时候产生,可以通过touch event handler的event对象取到 (一般是通过event.changedTouches属性)。这个对象包括一些重要的属性:

1
2
3
4
client / clientY:// 触摸点相对于浏览器窗口viewport的位置
pageX / pageY:// 触摸点相对于页面的位置
screenX /screenY:// 触摸点相对于屏幕的位置
identifier: // touch对象的unique ID

HTML主体定义

1
2
3
<body style=”height: 100%;margin:0;padding:0”>
<div id=”canvas”  style=”position: relative;width:100%;height: 100%;”></div>
</body>

 

实例:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mobile Event</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<style>
*{margin:0; padding:0;}
html,body{overflow:hidden;}
.rootContainer{width:100%; overflow:hidden;}
.baseWrap{width:100%;}
.base-con{width:100%; float:left;}

.bg1{background-color:#333;}
.bg2{background-color:#666;}
.bg3{background-color:#999;}

.slideBtn{padding-top:20px; text-align:center;}
.slideBtn li{width:10px; height:10px; display:inline-block; margin-right:10px; border-radius:5px; background-color:#F90;}
.slideBtn li.current{background-color:#06F;}

</style>
<script src="http://style.cggol.com/js/jquery.min.js"></script>

</head>

<body>

<div class="rootContainer" id="rootContainer">
 <div class="baseWrap">
  <div class="base-con bg1"></div>
  <div class="base-con bg2"></div>
  <div class="base-con bg3"></div>
 </div>
</div>
<ul class="slideBtn">
 <li class="current"></li>
 <li></li>
 <li></li>
</ul>

<script>
 $(document).ready(function(){
     //初始大小
     initContainer();
    
     $(window).resize(function(){
         initContainer();
     });
    
     function initContainer(){
        var winWidth=$(window).width();
        var rootContainer=$(".rootContainer");
        var baseWrap=$(".baseWrap");
        var conList=$(".base-con");
        var conLen=conList.length;
        
        rootContainer.css("width",winWidth);
        baseWrap.css("width",winWidth*conLen);
        conList.css("width",winWidth);
        conList.css("height","150px");
     }
 });
 
 $(document).ready(function(){
     //参数
     var winWidth=$(window).width();
     var rootContainer=$(".rootContainer");
     var baseWrap=$(".baseWrap");
     var conList=$(".base-con");
     var slideBtn=$(".slideBtn");
     var conLen=conList.length;
    
     var index=0;
     var startX,startY;
     var distance,maxDistance=50;
     var animateSpeed=500,recoverSpeed=100;
    
     var $t;
     var IntervalTime=8000;
    
     $t=setInterval(function(){leftSlide()},IntervalTime);
    
     var startX,startY,endX,endY;
     var m = Math,
     isTouchPad = (/hp-tablet/gi).test(navigator.appVersion),
     hasTouch = 'ontouchstart' in window && !isTouchPad,
     START_EV = hasTouch ? 'touchstart' : 'mousedown',
     MOVE_EV = hasTouch ? 'touchmove' : 'mousemove',
     END_EV = hasTouch ? 'touchend' : 'mouseup',
     CANCEL_EV = hasTouch ? 'touchcancel' : 'mouseup';
    
     var mdiv=document.getElementById("rootContainer");

     mdiv.addEventListener(MOVE_EV, function (e) {
        clearInterval($t);
     }, false);
    
     mdiv.addEventListener(START_EV, function (e) {
        clearInterval($t);
        var point = hasTouch ? e.touches[0] : e;
        startX=point.pageX;
     }, false);
    
     mdiv.addEventListener(END_EV, function (e) {
        var point = hasTouch ? e.changedTouches[0] : e;
        endX=point.pageX;
        mm();
        $t=setInterval(function(){leftSlide()},IntervalTime);
     }, false);
    
     function mm(){
        if(startX-endX>0){
            leftSlide();
        }else{
            rightSlide();
        }
     }
    
     /*
     rootContainer.mousedown(function(event){
         startX=event.screenX;
         startY=event.screenY;
         $(this).bind("mousemove",function(event){
             //清除滚动
             clearInterval($t);
             distance=event.screenX-startX;
            
             //向右滑 ->
             if(event.screenX-startX>maxDistance){
                 rootContainer.unbind("mousemove");
                 rightSlide();
             }
            
             //向左滑 <-
             if(event.screenX-startX<-maxDistance){
                 rootContainer.unbind("mousemove");
                 leftSlide();
             }
            
         });
     });
    
     rootContainer.mouseup(function(){
         $(this).unbind("mousemove");
         $t=setInterval(function(){leftSlide()},IntervalTime);
     });
     */
    
     //左滚动
     function leftSlide(){
         index++;
         if(index>conLen-1) index=0;
         slideBtn.find("li").eq(index).addClass("current").siblings().removeClass("current");
         baseWrap.animate({marginLeft:-winWidth},animateSpeed,function(){
             baseWrap.children("div:first").appendTo(baseWrap);
             $(this).css("margin-left",0);
         });
        
     }
    
     //右滚动
     function rightSlide(){
         index--;
         if(index<0) index=conLen-1;
         slideBtn.find("li").eq(index).addClass("current").siblings().removeClass("current");
         baseWrap.children("div:last").prependTo(baseWrap);
         baseWrap.css("margin-left",-winWidth);
         baseWrap.animate({marginLeft:0+"px"},animateSpeed,function(){});
     }
    
 });
 
</script>
</body>
</html>

上一篇:浅析OnKeyPress事件和OnKeyDown/OnKeyUp事件

下一篇:JavaScript实现动态添加信息

讨论数量:0

请先登录再发表讨论。 2024-03-29

天涯网魂
3 杠 5 星
TA 的文章
TA 的随言
TA 的资源链