• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    html5构建触屏网站之touch事件介绍
    前言
    一个触屏网站到底和传统的pc端网站有什么区别呢,交互方式的改变首当其冲。例如我们常用的click事件,在触屏设备下是如此无力。
    手机上的大部分交互都是通过touch来实现的,于是,对于触屏的交互式网站,触摸事件是相当重要的。
    Apple在iOS 2.0中引入了触摸事件API,Android正迎头赶上这一事实标准,缩小差距。最近一个W3C工作组正合力制定这一触摸事件规范。

    规范
    这里我们介绍几种普及得比较好的触摸事件,你可以在绝大多数现代浏览器中来测试这一事件(必须是触屏设备哦):
    touchstart:触摸开始的时候触发
    touchmove:手指在屏幕上滑动的时候触发
    touchend:触摸结束的时候触发
    而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点(用来实现多点触控):
    touches:当前位于屏幕上的所有手指的列表。
    targetTouches:位于当前DOM元素上手指的列表。
    changedTouches:涉及当前事件手指的列表。
    每个触摸点由包含了如下触摸信息(常用):
    identifier:一个数值,唯一标识触摸会话(touch session)中的当前手指。一般为从0开始的流水号(android4.1,uc)
    target:DOM元素,是动作所针对的目标。
    pageX/pageX/clientX/clientY/screenX/screenY:一个数值,动作在屏幕上发生的位置(page包含滚动距离,client不包含滚动距离,screen则以屏幕为基准)。 
    radiusX/radiusY/rotationAngle:画出大约相当于手指形状的椭圆形,分别为椭圆形的两个半径和旋转角度。初步测试浏览器不支持,好在功能不常用,欢迎大家反馈。
    有了这些信息,我们就可以依据这些事件信息为用户提供不同的反馈了。

    下面,我将为大家展示一个小demo,用touchmove实现的单指拖动:

    复制代码
    代码如下:

    /*单指拖动*/
    var obj = document.getElementById('id');
    obj.addEventListener('touchmove', function(event) {
    // 如果这个元素的位置内只有一个手指的话
    if (event.targetTouches.length == 1) {
         event.preventDefault();// 阻止浏览器默认事件,重要
    var touch = event.targetTouches[0];
    // 把元素放在手指所在的位置
    obj.style.left = touch.pageX-50 + 'px';
    obj.style.top = touch.pageY-50 + 'px';
    }
    }, false);

    关于a标签四个伪类在触屏设备中的小技巧
    我们都知道a标签的四个伪类link,visited,active,hover是专为click事件设计的,所以在触屏网站中尽量不要使用它们。经测试大部分也是不可用的。但是这里有一个关于hover的小技巧,当你点击过一个按钮之后,这个按钮就会一直处于hover的状态,此时你基于这个伪类所设置的css也是起作用的,直到你用手指点击另外一个按钮,hover状态就会转移到另一个按钮。利用这一点,我们可以做出一些小效果。此技巧在大多数浏览器中还是可用的。

    理想很丰满,现实很骨感
    虽然w3c为多点触控做好了准备,遗憾的是鲜有浏览器支持多点触控的特性,尤其是android平台上的浏览器,也就让上文介绍的手指列表变为了空谈,捕获两个触摸点会直接导致触摸失效!好在ios设备自带的safari浏览器能够支持这一特性,让我们对未来充满希望。毕竟,我们被鼠标的单点操作禁锢了太久,多指操作一个网站是多么令人兴奋!
    上一篇:HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
    下一篇:在html5的Canvas上绘制椭圆的几种方法总结
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    html5构建触屏网站之touch事件介绍 html5,构建,触屏,网站,之,