WINDOWS系统下触屏设备网页实现滚动的touch事件处理

Posted baimeishaoxia

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了WINDOWS系统下触屏设备网页实现滚动的touch事件处理相关的知识,希望对你有一定的参考价值。

公司有触控屏设备采用WIN7系统,普通网页打开后触屏操控如滑动网页没有效果,需在网页代码中添加JS处理touch事件网页的手势滑动效果。当然首先需要webkit内核支持touch事件。

以下内容引用http://www.cnblogs.com/zourong/p/3913446.html
touchstart: //手指放到屏幕上时触发
touchmove: //手指在屏幕上滑动式触发
touchend: //手指离开屏幕时触发
touchcancel: //系统取消touch事件的时候触发,这个好像比较少用

每个触摸事件被触发后,会生成一个event对象,event对象里额外包括以下三个触摸列表
touches: //当前屏幕上所有手指的列表
targetTouches: //当前dom元素上手指的列表,尽量使用这个代替touches
changedTouches: //涉及当前事件的手指的列表,尽量使用这个代替touches
这些列表里的每次触摸由touch对象组成,touch对象里包含着触摸信息,主要属性如下:
clientX / clientY: //触摸点相对浏览器窗口的位置
pageX / pageY: //触摸点相对于页面的位置
screenX / screenY: //触摸点相对于屏幕的位置
identifier: //touch对象的ID
target: //当前的DOM元素

注意:
手指在滑动整个屏幕时,会影响浏览器的行为,比如滚动和缩放。所以在调用touch事件时,要注意禁止缩放和滚动。
1.禁止缩放
通过meta元标签来设置。
<meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no">
2.禁止滚动
preventDefault是阻止默认行为,touch事件的默认行为就是滚动。
event.preventDefault();

以下引用自http://blog.csdn.net/jiangcs520/article/details/17564065

很多博文中称touch的三个事件都有targetTouches,touches以及changedTouches对象列表,其实不然,touchend事件中应该是只有个changedTouches触摸实例列表的,而且这里说明一下,回调函数的event只是一个普通的object对象,实际上event中有一个originalEvent属性,这才是真正的touch事件,这个事件中才存在着上诉三个触摸实例列表,这三个实例存储了触摸事件的位置等等属性,类似于鼠标事件。其他地方基本与鼠标事件是一致的。简单介绍一下这三个触摸列表,touches是在屏幕上的所有手指列表,targetTouches是当前DOM上的手指列表,所以当手指移开触发touchend事件时,event.originalEvent是没有这个targetTouches列表的,而changedTouches列表是涉及当前事件的列表,例如touchend事件中,手指移开。

根据以上2篇文章处理网页,对body进行pageY轴计算滑动距离,进行页面滚动;
在touchend事件中使用originalEvent.changedTouches[0].target属性判断链接目标进行点击。

<script type="text/javascript">
$(document).ready(function(){
    var startY = 0;
    var tObj = {pageY:0,isdown:false};
    
    $(".body").unbind(‘touchstart‘).bind(‘touchstart‘,function(e){
        e.preventDefault();
        tObj.pageY = e.originalEvent.targetTouches[0].pageY ;                   
        tObj.isdown = true;
        });          
                
    $("body").unbind(‘touchmove‘).bind(‘touchmove‘,function(e){
          e.preventDefault();
            if(tObj.isdown==true)
            {                    
                var dy =tObj.pageY -e.originalEvent.targetTouches[0].pageY;
                startY = startY+dy;
                if(Math.abs(dy)>=10)
                   {                           
                   window.scrollTo(0,startY);
                   }                       
            }
    });
                
    $(".body").unbind(‘touchend‘).bind(‘touchend‘,function(e){
        e.preventDefault(); 
        tObj.pageY = 0 ;                          
        tObj.isdown = false;
        e.originalEvent.changedTouches[0].target.click();       
    });    
});
</script>

本文转载于:猿2048WINDOWS系统下触屏设备网页实现滚动的touch事件处理

以上是关于WINDOWS系统下触屏设备网页实现滚动的touch事件处理的主要内容,如果未能解决你的问题,请参考以下文章

swiper轮播图插件

移动端PC端 网页特效

手机端如何用JS实现触屏

jquery怎么实现手机触屏图片滑动代码,手向左或向右滑动,图片滑动。不滑动的时候图片自动循环滚动

移动端网页轮播图

jquery怎么禁止手机页面触屏滑动页面滚动。(安卓和IOS都禁止)以及怎么接触禁止?谢谢