移动端触屏滑动的效果其实就是图片轮播，在PC的页面上很好实现，绑定click和mouseover等事件来完成。但是在移动设备上，要实现这种轮播的效果，就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。

四种touch事件

  • touchstart 当手指触摸到屏幕时触发，即使已经有一个手指放在了屏幕上也会触发。
  • touchmove 当手指在屏幕上连续滑动时触发，在这个事件发生期间，调用preventDefault()可阻止滚动。
  • touchend 当手指从屏幕上移开时触发
  • touchcancel 当系统停止跟踪触摸时触发（这个事件没有确定的触发时间）

它们都是冒泡的，也可以取消。

<script>

window.onload = function(){

    document.addEventListener("touchmove", _touch, false);

}

function _touch(event){

    alert();

}

</script>

每个触摸事件被触发后，会生成一个event对象，event对象里额外包括以下三个触摸属性

touches:表示当前跟踪的触摸操作的Touch对象的数组。
targetTouches:特定于事件目标的Touch对象的数组。
changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。

这些列表里的每次触摸由touch对象组成，touch对象里包含着触摸信息，主要属性如下：

clientX / clientY: //触摸点相对浏览器窗口的位置

pageX / pageY: //触摸点相对于页面的位置

screenX / screenY: //触摸点相对于屏幕的位置

identifier: //touch对象的ID

target: //当前的DOM元素

一些手势

  • gesturestart 当一个手指按在屏幕上另外一个手指又触摸屏幕时触发
  • gesturechange 依赖前者当其中的一个手指发生改变时触发
  • gestureend 当任何一个手指离开时触发

注意：

手指在滑动整个屏幕时，会影响浏览器的行为，比如滚动和缩放。所以在调用touch事件时，要注意禁止缩放和滚动。

1.禁止缩放

通过meta元标签来设置。

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

2.禁止滚动

preventDefault是阻止默认行为，touch事件的默认行为就是滚动。

event.preventDefault();

例如：

document.body.addEventListener('touchmove', function(event) {

 event.preventDefault();

}, false);

完整示例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

<title>touch</title>

<script>

function load (){

    document.addEventListener('touchstart',touch,false);

    document.addEventListener('touchmove',touch,false);

    document.addEventListener('touchend',touch,false);

    function touch (event){

        var event = event || window.event;

        var oInp = document.getElementById("inp");

        switch(event.type){

            case "touchstart":

                oInp.innerHTML ="Touch started (" + event.touches[].clientX +"," + event.touches[].clientY +")";

                break;

            case "touchend":

                oInp.innerHTML ="<br>Touch end (" + event.changedTouches[].clientX +"," + event.changedTouches[].clientY +")";

                break;

            case "touchmove":

                event.preventDefault();

                oInp.innerHTML ="<br>Touch moved (" + event.touches[].clientX +"," + event.touches[].clientY +")";

                break;

        }

    }

}

window.addEventListener('load',load,false);

</script>

</head>

<body>

<div id="inp">div</div>

</body>

</html>

touch移动触屏滑动事件的更多相关文章

  1. js实现touch移动触屏滑动事件

    在开始描述touch事件之前,需要先描述一下多触式系统中特有的touch对象(android和iOS乃至nokia最新的meego系统都模拟了类 似的对象).这个对象封装一次屏幕触摸,一般来自于手指. ...

  2. JS移动客户端--触屏滑动事件 banner图效果

    JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t ...

  3. JS移动客户端--触屏滑动事件

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  4. JS移动客户端--触屏滑动事件及js手机拖拽效果

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  5. 移动端touch触屏滑动事件、滑动触屏事件监听！

    一.触摸事件 ontouchstart.ontouchmove.ontouchend.ontouchcancel 目前移动端浏览器均支持这4个触摸事件,包括IE.由于触屏也支持MouseEvent,因 ...

  6. 朋友圈常见单页面触屏滑动上下翻屏功能jQuery实现

    翻页插件:实现原理,用margin-top来控制页面容器位置来实现上下翻页.margin这属性很好用,可以用来制作侧栏动画滑出菜单(左菜单,右内容,控制两者的margin实现):或者head下滑菜单 ...

  7. 移动端触屏滑动，JS事件

    先了解下 移动端的触屏滑动 毕竟这玩意其实和PC端还是有一定的区别的 hh 整理了下网上的资料放一放 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等 ...

  8. JavaScript触屏滑动API介绍

    随着触屏手机.平板电脑的普及和占有更多用户和使用时间,触屏的触碰.滑动等事件也成为javaScript开发不可避免的知识,现在何问起就和大家一起学习js的触屏操作,js的触屏touchmove事件,为 ...

  9. JS案例之5——移动端触屏滑动

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

随机推荐

  1. Linux操作系统启动流程梳理

    接触linux系统运维已经好几年了,常常被问到linux系统启动流程问题,刚好今天有空来梳理下这个过程:一般来说,所有的操作系统的启动流程基本就是: 总的来说,linux系统启动流程可以简单总结为以下 ...

  2. TestFlight

    链接: 如何使用TestFlight进行Beta测试 [转]TestFlight APP测试(IOS如何让上架前给其他人测试) 转]TestFlight APP测试(IOS如何让上架前给其他人测试) ...

  3. PhpStorm XDebug 远程调试

    现在我们自己公司的各种开发和测试服务器,都是使用阿里云的服务器.一些PHP的项目,无法在本地搭建完整的环境,在外网服务器上调试更方便定位问题.发现网上没有完整的关于如何配置PHPStorm和XDebu ...

  4. Memcached 服务器端命令

    memcached的基本命令(安装.卸载.启动.配置相关): -p 监听的端口   -l 连接的IP地址, 默认是本机    -d start 启动memcached服务   -d restart 重 ...

  5. C 语言学习 第五次作业总结

    第五次作业,主要学习和复习的是几种循环结构的使用. 在前一次的课堂上,同学们已经学习了分支语句的使用.分支语句和循环语句配合使用,就可以写出更多的,逻辑功能丰富的代码了. 逻辑功能的丰富,也意味着学习 ...

  6. I finally made sense of front end build tools. You can, too.

    来源于:https://medium.freecodecamp.com/making-sense-of-front-end-build-tools-3a1b3a87043b#.nvnd2vsd8   ...

  7. 【UOJ #246】【UER #7】套路

    http://uoj.ac/contest/35/problem/246 神奇!我这辈子是想不出这样的算法了. 对区间长度分类讨论:题解很好的~ 我已经弱到爆了,看完题解后还想了一晚上. 题解中&qu ...

  8. WPF资源字典的使用【转】

    资源字典出现的初衷就在于可以实现多个项目之间的共享资源,资源字典只是一个简单的XAML文档,该文档除了存储希望使用的资源之外,不做任何其它的事情. 1.  创建资源字典 创建资源字典的过程比较简单,只 ...

  9. .NET 学习书籍推荐

    时间过得好快啊,转眼三月过了1周多了,今天把看书的目录记录下,方便初学者 最近由于项目需要研究下dotnet 技术,参考书籍如下: 1.深入理解C# 2.CLR via  C# 3.Framework ...

  10. Java面试之SpringMVC总结以及在面试中的一些问题.

    1.简单的谈一下SpringMVC的工作流程? 流程 1.用户发送请求至前端控制器DispatcherServlet 2.DispatcherServlet收到请求调用HandlerMapping处理 ...