• 移动端滑动事件


       安卓webview下使用zepto的swipe时遇到的问题

       (使用zepto的swipe时必须引用touch.js,不然很多移动端浏览器swipe会失灵。)

       我想要用swipeLeft/swipeRight监听向左向右滑动事件,如果只是单纯为元素增加swipeLeft/swipeRight事件的话在webview下是不生效的,如果这个页面不需要上下滑动的话,完全可以用

    $('body').bind("touchmove", function(e) {     e.preventDefault();});

    解决。即取消body的touchmove默认行为即可。但这种做法太绝对太暴力了,如果页面需要上下滑动的话,那就会出问题。这里有两种情况,第一种是页面内的某个元素需要上下滑动,另一种是页面需要上下滑动。第一种情况,只是页面内某个元素需要上下滑动的话,可为这个元素监听touchmove事件,阻止冒泡。比如:
    $(id).bind("touchmove", function(e) {     e.stopPropagation()});

    那如果是整个页面需要上下滑动,就全部用touch(touchStart/touchmove/touchEnd)模拟实现(在安卓webview下我模拟的swipe手势并不会触发touchend事件,我想这应该也是zepto自己封装的swipe事件失效的原因,思路是在用户刚开始滑动的时候,判断用户是想上下滑动还是左右滑动,上下滑动的话不做处理,左右滑动的话,对touchmove事件进行preventDefault()操作。)

    jquery不支持swipe事件,需应用jquery mobile



    原生javascript touch事件,touchstart,touchmove,touchend

       三种在规范中列出并获得跨移动设备广泛实现的基本触摸事件:

       1. touchstart :手指放在一个DOM元素上。
       2. touchmove :手指拖曳一个DOM元素。
       3. touchend :手指从一个DOM元素上移开。

       每个触摸事件都包括了三个触摸列表:

       1. touches :当前位于屏幕上的所有手指的一个列表。
       2. targetTouches :位于当前DOM元素上的手指的一个列表。
       3. changedTouches :涉及当前事件的手指的一个列表。

       例如,在一个touchend事件中,这就会是移开的手指。

       这些列表由包含了触摸信息的对象组成:

       1. identifier :一个数值,唯一标识触摸会话(touch session)中的当前手指。
       2. target :DOM元素,是动作所针对的目标。
       3. 客户/页面/屏幕坐标 :动作在屏幕上发生的位置。
       4. 半径坐标和 rotationAngle :画出大约相当于手指形状的椭圆形。

    例如:
    document.body.addEventListener('touchmove', function(event) { 
    event.preventDefault(); 
    }, false);

  • 相关阅读:
    从读者角度来看Blog
    NDuiker项目第3天
    IssueVision的List控件源码分析
    测试一个网站的想法
    IssueVision的PaneCaption控件源码分析
    技术研究的时候不要忘了“集成创新”
    人脸识别活体检测之张张嘴和眨眨眼
    jsp>Session 小强斋
    jsp>Request对象 小强斋
    jsp>四种作用域 小强斋
  • 原文地址:https://www.cnblogs.com/czzblog/p/4892137.html
Copyright © 2020-2023  润新知