1. touchstart : 手指放到屏幕上时触发

2. touchmove : 手指在屏幕上滑动时触发

3. touched : 手指离开屏幕时触发

4. touchcancel : 系统取消touch事件时触发，比较少用

移动端一般有三种操作：点击、滑动、拖动，这三种操作一般是组合使用上面4个事件来完成。可以使用封装成熟的js库——zepto.js

这个库有与juquery类似的api，专门针对移动端浏览器的轻量级js库。

中文网站：http://www.css88.com/doc/zeptojs_api/

可以定制： http://github.e-sites.nl/zeptobuilder/

tap元素类似click，但是比click快

longtap 当一个元素被按超过750ms触发

swipe \ swipeLeft \ swipeRight \ swipeDown 当元素被划过时触发（可以选择给定方向）

不知道为什么，定制js那个网站上不去，所以我下了touch.js和fx.js，完成滑动和动画。

一个滑动删除的例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0

    maximum-scale=1.0, minimum-scale=1.0">

    <script type="text/javascript" src="js/zepto.min.js"></script>

    <script type="text/javascript" src="js/touch.js"></script>

    <script type="text/javascript" src="js/fx.js"></script>

    <style type="text/css">

        .list{

            width:98%;

            list-style: none;

            /*background-color: aquamarine;*/

            margin:20px auto 0;

            padding:0;

        }

        .list li{

            border-bottom:1px solid #666;

            height:40px;

            line-height:40px;

            /*background-color: hotpink;*/

            position: relative;

            overflow:hidden;

        }

        .list li a{

            /*background-color: darksalmon;*/

            text-decoration:none;

            position:absolute;

            left:0;

        }

        .list li span{

            background-color:red;

            position: absolute;

            right:-60px;

            color:#fff;

            padding:0 10px;

        }

    </style>

    <script type="text/javascript">

        $(function () {

            $('.list li').swipeLeft(function () {

                $(this).children('a').animate({left:-60});

                $(this).children('span').animate({right:0});

            });

            $('.list li').swipeRight(function () {

                $(this).children('a').animate({left:0});

                $(this).children('span').animate({right:-60});

            });

        //    压扁再删除

            $('.list span').tap(function () {

                $(this).parent().animate({height:0},function () {

                    $(this).remove();

                })

            })

        })

    </script>

</head>

<body>

<!--relative相对运动本身可以相对自己位置移动-->

    <ul class="list ">

        <li><a href="#" >新闻标题111111</a><span>删除</span></li>

        <li><a href="#">新闻标题2222222222</a><span>删除</span></li>

        <li><a href="#">新闻标题333333333</a><span>删除</span></li>

        <li><a href="#">新闻标题444444444</a><span>删除</span></li>

    </ul>

</body>

</html>

效果展示：

js——移动端js事件、zepto.js的更多相关文章

  1. 11-移动端开发教程-zepto.js入门教程

    Zepto.js是一个轻量级的针对现代浏览器的JavaScript库, 它与jquery有着类似的api. 如果你会用jquery,那么你也会用zepto. 1. Why Zepto.js? API类 ...

  2. 原生js移动端touch事件实现上拉加载更多

    大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...

  3. js移动端tap事件封装

    这几天做项目,发现移动端需要触摸事件,而click肯定是不行的,于是我对tap事件封装进行了搜索,找到了一篇文章,原文地址如下:http://www.jb51.net/article/50663.ht ...

  4. 移动端手势事件 hammer.JS插件

                      一.引入hammer.JS 1.下载地址:http://download.csdn.net/detail/webxiaoma/9872249 2.官网地址:http ...

  5. 原生js移动端滑动事件

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

  6. Zepto.js touch模块深入分析 解决手机点击事件

    源码: // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely distributed under the MIT li ...

  7. Zepto.js库touch模块代码解析

    Zepto.js也许并不陌生,专门针对移动端开发,Zepto有一些基本的触摸事件可以用来做触摸屏交互(tap事件.swipe事件),Zepto是不支持IE浏览器的. 下面来解析一些Zepto.js触摸 ...

  8. Zepto.js touch模块深入分析

    目的:记录 Zepto.js touch模块 源码阅读 源码: // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely ...

  9. zepto.js的基本介绍与使用

    最近看到了一篇文章,是介绍一种新的js框架,名为zepto.js,他适用于移动设备已经桌面浏览器除了ie系列的.. 他兼容jquery的API,所以学起来或用起来并不吃力.他比jquery的优势在于1 ...

  10. zepto.js

    // Zepto.js// (c) 2010-2016 Thomas Fuchs// Zepto.js may be freely distributed under the MIT license. ...

随机推荐

  1. oracle rac的特征

    oracle rac的特征 1. spfile 参数文件需要被所有节点访问,需要放在共享存储上. 2. Redo ThreadRAC 环境下有多个实例,每个实例都需要有自己的一套Redo log 文件 ...

  2. jquery.cxSelect插件，城市没单位

    jquery.cxSelect插件,新增城市没单位也能显示出来的功能. 具体,请查看修改后的插件代码:(主要是FixNoUnit函数) /*! * jQuery cxSelect * @name jq ...

  3. #include <deque>

    deque \(deque\)头文件主要包括一个双端队列容器.是一个支持在两端插入两端删除的线性储存空间,与vector和queue相似.与\(vector\)比起来,\(deque\)可以在\(O( ...

  4. bzoj 2597 剪刀石头布 —— 拆边费用流

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2597 不合法的三个人之间的关系就是一个人赢了两次: 记 \( deg[i] \) 表示第 \ ...

  5. JAVA中重写equals()方法为什么要重写hashcode()方法说明

    重写hashCode()时最重要的原因就是:无论何时,对同一个对象调用hashCode()都应该生成同样的值.如果在将一个对象用put()方法添加进HashMap时产生一个hashCode()值,而用 ...

  6. 【转】 Pro Android学习笔记（四一）：Fragment（6）：数据保留

    目录(?)[-] 通过fragment参数实现数据保留 对TitleFragment进行修改 对DetailActivity进行修改 通过savedInstanceState进行数据保留 保留frag ...

  7. 【转】Pro Android学习笔记（二六）：用户界面和控制（14）：RelativeLayout

    相对布局:RelativeLayout RelativeLayout也是非常常用的布局,能够精确对控件的位置进行网格对齐,可以设置在控件与其他控件的相对位置,以及控件在容器中的位置.缺省控件的位置为最 ...

  8. 【转】Pro Android学习笔记（十）：了解Intent（上）

    目录(?)[-] Intent基本含义 系统的Intent Android引入了Intent的概念来唤起components,component包括:1.Activity(UI元件) 2.Servic ...

  9. js数组与 json 的区别

    一,数组 1. 定义一维数组:var s1=new Array(); s1=[1,2,3,4]或者s1[0]=1,s1[1]=2,s1[3]=3,s1[4]=4; alert(s1[0]); 结果为1 ...

  10. netstat查看网络信息

    Netstat 命令用于显示各种网络相关信息,如网络连接,路由表,接口状态 (Interface Statistics),masquerade 连接,多播成员 (Multicast Membershi ...