移动端JS事件、移动端框架
一、移动端的操作方式和PC端是不同的，移动端主要是用手指操作，所以有特殊的touch事件，touch事件包括如下几个事件：
1、手指放到屏幕上时触发 touchstart
2、手指放在屏幕上滑动式触发 touchmove
3、手指离开屏幕时触发。 touchend
4、系统取消touch事件的时候触发，比较少用。 touchcancel
每个事件都有以下列表，比如touchend的targetTouches当然是 0 咯：
touches //位于屏幕上的所有手指的列表
targetTouches //位于该元素上的所有手指的列表
changedTouches //涉及当前事件的所有手指的列表
每个事件有列表，每个列表还有以下属性：
其中坐标常用pageX,pageY：
pageX //相对于页面的 X 坐标
pageY //相对于页面的 Y 坐标
clientX //相对于视区的 X 坐标
clientY //相对于视区的 Y 坐标
screenX //相对于屏幕的 X 坐标
screenY //相对于屏幕的 Y 坐标
identifier // 当前触摸点的惟一编号
target //手指所触摸的 DOM 元素
其他相关事件：
event.preventDefault（） //阻止触摸时浏览器的缩放、滚动条滚动
var supportTouch = "createTouch" in document //判断是否支持触摸事件
二、移动端一般有三种操作：点击、滑动、拖动，这三种操作一般是组合使用上面的几个事件来完成的，所有上面的4个事件一般很少单独使用，一般是封装使用来实现这三种操作，也可以使用封装成熟的js库
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>无标题文档</title>
<style>
div{width:100px;height:100px;line-height:100px;margin-bottom:10px;background:red;text-align:center;color:#fff;}
</style>
<script>
/***
@name:触屏事件
@param {string} element dom元素
{function} fn 事件触发函数
***/ var touchEvent={ /*单次触摸事件*/
tap:function(element,fn){
var startTx, startTy;
element.addEventListener('touchstart',function(e){
var touches = e.touches[0];
startTx = touches.clientX;
startTy = touches.clientY;
}, false ); element.addEventListener('touchend',function(e){
var touches = e.changedTouches[0],
endTx = touches.clientX,
endTy = touches.clientY;
// 在部分设备上 touch 事件比较灵敏，导致按下和松开手指时的事件坐标会出现一点点变化
if( Math.abs(startTx - endTx) < 6 && Math.abs(startTy - endTy) < 6 ){
fn();
}
}, false );
}, /*两次触摸事件*/
doubleTap:function(element,fn){
var isTouchEnd = false,
lastTime = 0,
lastTx = null,
lastTy = null,
firstTouchEnd = true,
body = document.body,
dTapTimer, startTx, startTy, startTime;
element.addEventListener( 'touchstart', function(e){
if( dTapTimer ){
clearTimeout( dTapTimer );
dTapTimer = null;
}
var touches = e.touches[0];
startTx = touches.clientX;
startTy = touches.clientY;
}, false );
element.addEventListener( 'touchend',function(e){
var touches = e.changedTouches[0],
endTx = touches.clientX,
endTy = touches.clientY,
now = Date.now(),
duration = now - lastTime;
// 首先要确保能触发单次的 tap 事件
if( Math.abs(startTx - endTx) < 6 && Math.abs(startTx - endTx) < 6 ){
// 两次 tap 的间隔确保在 500 毫秒以内
if(duration < 301 ){
// 本次的 tap 位置和上一次的 tap 的位置允许一定范围内的误差
if( lastTx !== null &&
Math.abs(lastTx - endTx) < 45 &&
Math.abs(lastTy - endTy) < 45 ){
firstTouchEnd = true;
lastTx = lastTy = null;
fn();
}
}
else{
lastTx = endTx;
lastTy = endTy;
}
}
else{
firstTouchEnd = true;
lastTx = lastTy = null;
}
lastTime = now;
}, false );
// 在 iOS 的 safari 上手指敲击屏幕的速度过快，
// 有一定的几率会导致第二次不会响应 touchstart 和 touchend 事件
// 同时手指长时间的touch不会触发click
if(~navigator.userAgent.toLowerCase().indexOf('iphone os')){
body.addEventListener( 'touchstart', function(e){
startTime = Date.now();
}, true );
body.addEventListener( 'touchend', function(e){
var noLongTap = Date.now() - startTime < 501;
if(firstTouchEnd ){
firstTouchEnd = false;
if( noLongTap && e.target === element ){
dTapTimer = setTimeout(function(){
firstTouchEnd = true;
lastTx = lastTy = null;
fn();
},400);
}
}
else{
firstTouchEnd = true;
}
}, true );
// iOS 上手指多次敲击屏幕时的速度过快不会触发 click 事件
element.addEventListener( 'click', function( e ){
if(dTapTimer ){
clearTimeout( dTapTimer );
dTapTimer = null;
firstTouchEnd = true;
}
}, false );
}
}, /*长按事件*/
longTap:function(element,fn){
var startTx, startTy, lTapTimer;
element.addEventListener( 'touchstart', function( e ){
if( lTapTimer ){
clearTimeout( lTapTimer );
lTapTimer = null;
}
var touches = e.touches[0];
startTx = touches.clientX;
startTy = touches.clientY;
lTapTimer = setTimeout(function(){
fn();
}, 1000 );
e.preventDefault();
}, false );
element.addEventListener( 'touchmove', function( e ){
var touches = e.touches[0],
endTx = touches.clientX,
endTy = touches.clientY;
if( lTapTimer && (Math.abs(endTx - startTx) > 5 || Math.abs(endTy - startTy) > 5) ){
clearTimeout( lTapTimer );
lTapTimer = null;
}
}, false );
element.addEventListener( 'touchend', function( e ){
if( lTapTimer ){
clearTimeout( lTapTimer );
lTapTimer = null;
}
}, false );
}, /*滑屏事件*/
swipe:function(element,fn){
var isTouchMove, startTx, startTy;
element.addEventListener( 'touchstart', function( e ){
var touches = e.touches[0];
startTx = touches.clientX;
startTy = touches.clientY;
isTouchMove = false;
}, false );
element.addEventListener( 'touchmove', function( e ){
isTouchMove = true;
e.preventDefault();
}, false );
element.addEventListener( 'touchend', function( e ){
if( !isTouchMove ){
return;
}
var touches = e.changedTouches[0],
endTx = touches.clientX,
endTy = touches.clientY,
distanceX = startTx - endTx
distanceY = startTy - endTy,
isSwipe = false;
if( Math.abs(distanceX)>20||Math.abs(distanceY)>20 ){
fn();
}
}, false );
}, /*向上滑动事件*/
swipeUp:function(element,fn){
var isTouchMove, startTx, startTy;
element.addEventListener( 'touchstart', function( e ){
var touches = e.touches[0];
startTx = touches.clientX;
startTy = touches.clientY;
isTouchMove = false;
}, false );
element.addEventListener( 'touchmove', function( e ){
isTouchMove = true;
e.preventDefault();
}, false );
element.addEventListener( 'touchend', function( e ){
if( !isTouchMove ){
return;
}
var touches = e.changedTouches[0],
endTx = touches.clientX,
endTy = touches.clientY,
distanceX = startTx - endTx
distanceY = startTy - endTy,
isSwipe = false;
if( Math.abs(distanceX) < Math.abs(distanceY) ){
if( distanceY > 20 ){
fn();
isSwipe = true;
}
}
}, false );
}, /*向下滑动事件*/
swipeDown:function(element,fn){
var isTouchMove, startTx, startTy;
element.addEventListener( 'touchstart', function( e ){
var touches = e.touches[0];
startTx = touches.clientX;
startTy = touches.clientY;
isTouchMove = false;
}, false );
element.addEventListener( 'touchmove', function( e ){
isTouchMove = true;
e.preventDefault();
}, false );
element.addEventListener( 'touchend', function( e ){
if( !isTouchMove ){
return;
}
var touches = e.changedTouches[0],
endTx = touches.clientX,
endTy = touches.clientY,
distanceX = startTx - endTx
distanceY = startTy - endTy,
isSwipe = false;
if( Math.abs(distanceX) < Math.abs(distanceY) ){
if( distanceY < -20 ){
fn();
isSwipe = true;
}
}
}, false );
}, /*向左滑动事件*/
swipeLeft:function(element,fn){
var isTouchMove, startTx, startTy;
element.addEventListener( 'touchstart', function( e ){
var touches = e.touches[0];
startTx = touches.clientX;
startTy = touches.clientY;
isTouchMove = false;
}, false );
element.addEventListener( 'touchmove', function( e ){
isTouchMove = true;
e.preventDefault();
}, false );
element.addEventListener( 'touchend', function( e ){
if( !isTouchMove ){
return;
}
var touches = e.changedTouches[0],
endTx = touches.clientX,
endTy = touches.clientY,
distanceX = startTx - endTx
distanceY = startTy - endTy,
isSwipe = false;
if( Math.abs(distanceX) >= Math.abs(distanceY) ){
if( distanceX > 20 ){
fn();
isSwipe = true;
}
}
}, false );
}, /*向右滑动事件*/
swipeRight:function(element,fn){
var isTouchMove, startTx, startTy;
element.addEventListener( 'touchstart', function( e ){
var touches = e.touches[0];
startTx = touches.clientX;
startTy = touches.clientY;
isTouchMove = false;
}, false );
element.addEventListener( 'touchmove', function( e ){
isTouchMove = true;
e.preventDefault();
}, false );
element.addEventListener( 'touchend', function( e ){
if( !isTouchMove ){
return;
}
var touches = e.changedTouches[0],
endTx = touches.clientX,
endTy = touches.clientY,
distanceX = startTx - endTx
distanceY = startTy - endTy,
isSwipe = false;
if( Math.abs(distanceX) >= Math.abs(distanceY) ){
if( distanceX < -20 ){
fn();
isSwipe = true;
}
}
}, false );
} }
</script>
<script>
window.onload=function(){
var aDiv=document.getElementsByTagName("div"); touchEvent.tap(aDiv[0],function(){
alert("单次触摸");
}) touchEvent.doubleTap(aDiv[1],function(){
alert("两次触摸");
}) touchEvent.longTap(aDiv[2],function(){
alert("长按");
}) touchEvent.swipe(document,function(){
alert("滑屏了");
}) touchEvent.swipeUp(document,function(){
alert("向上滑屏了");
}) touchEvent.swipeDown(document,function(){
alert("向下滑屏了");
}) touchEvent.swipeLeft(document,function(){
alert("向左滑屏了");
}) touchEvent.swipeRight(document,function(){
alert("向右滑屏了");
})
} </script>
</head>
<body>
<div class="box1">单次触摸我</div>
<div class="box2">两次触摸</div>
<div class="box3">长按我</div>
<span>试一试在屏幕上任意区域滑动</span>
</body>
</html>
移动端touch事件封装
1、移动框架之zeptojs
Zepto是一个轻量级的针对现代高级浏览器的JavaScript库，它与jquery有着类似的API。如果你会用jquery，那么你也会用zepto。Zepto的一些可选功能是专门针对移动端浏览器的;它的最初目标是在移动端提供一个精简的类似jquery的js库。
a、zepto官网：http://zeptojs.com/
b、zepto中文api：http://www.css88.com/doc/zeptojs_api/
c、zepto包含很多模块，默认下载版本包含的模块有Core，Ajax，Event，Form，IE模块，如果还需要其他的模块，可以自定义构建。
d、zepto自定义构建地址：http://github.e-sites.nl/zeptobulider/
e、touch模块封装了针对移动端常用的事件，可使用此模块进行移动端特定效果开发，这些事件有：
e1、tap元素tap的时候触发，此事件类似click，但是比click快
e2、longTap当一个元素被按住超过750ms触发
e3、swipe ，swipeLeft，swipeRight，swipeUp，swipeDown当元素被划过时触发。（可选择给定的方向）
实际应用之手机滑到删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scale=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
<title>手机端移动删除</title> <link rel="stylesheet" href="../css/reset.css">
<style>
.con{
width:90%;
height:500px;
margin:50px auto;
}
.con ul li{
width:100%;
height:35px;
padding-bottom: 10px;
border-bottom:1px solid #ccc;
position: relative;
overflow: hidden;
}
.con ul li a{
width:86%;
margin: 15px 0;
position:absolute;
left:0;
top:0;
word-break: break-all;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.con ul li span{
width:10%;
padding:5px 2%;
margin-top:10px;
text-align: center;
position:absolute;
right:-14%;
color:#fff;
background:#c7254e;
}
</style>
<script src="https://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script>
<script>
$(function(){
var $li = $(".list li");
$li.swipeLeft(function(){
$(this).children().eq(0).animate({left:'-10%'},100);
$(this).children().eq(1).animate({right:0},100);
});
$li.swipeRight(function(){
$(this).children().eq(0).animate({left:0},100);
$(this).children().eq(1).animate({right:"-10%"},100);
});
$("li span").tap(function(){
var li =$(this).parent();
li.animate({height:0});
li.remove();
})
})
</script>
</head>
<body>
<div class="con">
<ul class="list">
<li>
<a href="">北大暑期人气爆棚 排队人群绵延数百米</a>
<span class="del">删除</span>
</li>
<li>
<a href="">教育部：经批准儿童可延缓入学，教育部门不得拒收</a>
<span class="del">删除</span>
</li>
<li>
<a href="">教育部：高校举办运动队项目数原则上不多于5个</a>
<span class="del">删除</span>
</li>
<li>
<a href="">新高考招录方式：高校与考生之间的“精准匹配”</a>
<span class="del">删除</span>
</li>
<li>
<a href="">最拼小学生！两天“赶场”9个培训班</a>
<span class="del">删除</span>
</li>
</ul>
</div>
</body>
</html>
滑动删除
2、移动框架之swiper
swiper.js是一款成熟的稳定的应用于PC端和移动端的滑动效果插件，一般用来触屏焦点图、触屏整屏滚动等效果。swiper分为2x版和3x版，2x版支持低版本浏览器（IE7），3x放弃支持低版本浏览器。适合应用在移动端。
2x版本中文网址：http://2.swiper.com.cn/
3x版本中文网址：http://www.swiper.com.cn/
Swiper使用方法
1.首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。
如果你的页面加载了jQuery.js或者zepto.js，你可以选择使用更轻便的swiper.jquery.min.js。
2.HTML内容。
3.你可能想要给Swiper定义一个大小，当然不要也行。
4.初始化Swiper：最好是挨着</body>标签
5、如果不能写在HTML内容的后面，则需要在页面加载完成后再初始化。
或者这样（Jquery和Zepto）
swiper（使用参数）
1、initialSlide：初始索引值，从0开始
2、direction：滑动方向 horizontal vertical
3、speed：滑动速度，单位ms
4、autoplay：设置自动播放及播放时间
5、autoplayDisableOnraction：用户操作swiper后是否还自动播放，默认是true，不再自动播放
6、pagination：分页圆点
7、paginationClickable：分页圆点是否点击
8、prevButton：上一页箭头
9、nextButton：下一页箭头
10、loop：是否首尾衔接
11、onSlideChangeEnd：回调函数，滑动结束时执行
swiper制作实例：
1、swiper制作移动端焦点图实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scale=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
<title>手机幻灯片</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/swiper.min.css">
<script src="../js/jquery-1.12.4.min.js"></script>
<script src="../js/set_root.js"></script>
<script src="../js/zepto.min(1).js"></script>
<script src="../js/swiper.jquery.min.js"></script>
<script>
$(function(){
var mySwiper = new Swiper ('.swiper-container', {
//滑动方向 horizontal vertical
direction: 'horizontal',
//是否首尾衔接
loop: true,
// 如果需要分页器
pagination: '.swiper-pagination',
// 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
//初始幻灯片，默认从0开始
initialSlide:1,
//分页圆点是否可以点击
paginationClickable:true,
//设置自动播放及间隔时间
autoplay:3000,
//用户操作swiper后是否还自动播放，默认是true，不再自动播放
autoplayDisableOnInteraction:false
})
})
</script>
<style>
img{
width:100%;
}
.swiper-button-next, .swiper-button-prev{
width:13px;
height:22px;
margin-top:-11px;
-moz-background-size: 13px 22px;
-webkit-background-size: 13px 22px;
-o-background-size: 13px 22px;
background-size: 13px 22px;
}
.swiper-pagination-bullet{
width:16px;
height:16px;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="../images/li01.png" alt="幻灯片图片01">
</div>
<div class="swiper-slide">
<img src="../images/li02.png" alt="幻灯片图片02">
</div>
<div class="swiper-slide">
<img src="../images/li03.png" alt="幻灯片图片03">
</div>
<div class="swiper-slide">
<img src="../images/li04.png" alt="幻灯片图片03">
</div><div class="swiper-slide">
<img src="../images/li05.png" alt="幻灯片图片03">
</div> </div>
<!-- 小圆点分页 -->
<div class="swiper-pagination"></div>
<!-- 上一页下一页 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div> </body>
</html>
移动端焦点图
2、swiper制作手机端整页滚动效果
移动端JS事件、移动端框架的更多相关文章
- js——移动端js事件、zepto.js
1. touchstart : 手指放到屏幕上时触发 2. touchmove : 手指在屏幕上滑动时触发 3. touched : 手指离开屏幕时触发 4. touchcancel : 系统取消to ...
- 一些pc端web事件移动端不再可行
1.onkeyUp,onkeyDown,onkeyPress等事件不再管用,要用oninput代替 2.onclick事件会有延迟,因为手机需要等待判断是否是双击事件(ondblclick).所以 ...
- 移动端-js触摸事件
开发者工具 在移动开发中,一种较为容易的做法是,先在桌面上开始原型设计,然后再在打算要支持的设备上处理移动特有的部分.多点触摸正是难以在PC上进行测试的那些功能之一,因为大部分的PC都没有触摸输入. ...
- vue.js 添加 fastclick的支持 处理移动端click事件300毫秒延迟
fastclick:处理移动端click事件300毫秒延迟. 1,先执行安装fastclick的命令 npm install fastclick 2,在main.js中引入,并绑定到body. imp ...
- js 处理移动端触摸事件
在处理移动端的touch事件时,我们可以选择一些插件来处理,比如jquery ui touch punch.js 提供丰富的触摸效果,可以满足移动端的开发, 但是,有些移动端开发中,并不需要如此复杂的 ...
- next.js、nuxt.js等服务端渲染框架构建的项目部署到服务器，并用PM2守护程序
前端渲染:vue.react等单页面项目应该这样子部署到服务器 貌似从前几年,前后端分离逐渐就开始流行起来,把一些渲染计算的工作抛向前端以便减轻服务端的压力,但为啥现在又开始流行在服务端渲染了呢?如v ...
- 基于VUE.JS的移动端框架Mint UI
Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint ...
- h5开发app,移动端 click 事件响应缓慢的解决方案
造成点击缓慢的原因 从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间.为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作. 使用 ...
- 移动端——JS（一）
javascript(简称js)语言在移动前端可以说必不可少,许多效果都是和js相关的,包括现在移动端的一些框架:jqmobi.jqtouch.sencha touch.jquerymobile等等. ...
随机推荐
- Android控件的使用
1. RadioButton (单选按钮) 嵌入到RadioGroup中实现单选效果 android:checkedButton="radio的id值" int getchecke ...
- 线程-join();
一.join()方法,官方描述 waits for this thread to die 等待当前线程死亡: 源码: //无参,默认调用join(0) public final void join ...
- C#基础 Dictionary存储自定义对象作为键值
程序每次向容器Dictionary中插入数据时,都会判断Key值是否已经存在,如果不存在,则插入.否则抛出异常.那么Dictionary又是如何判断Key值是否存在的呢? 请看下面的代码: cla ...
- 测序分析软件-phred的安装
1.进入phred官网,给作者写信,获得所需的软件,大约需要两三天的时间即可收到回信. 2.根据作者的指示下载,解压相应软件. 3.以笔者本人的安装为例unbuntu系统(phred自带的instal ...
- C#简单构架之EF进行读写分离+多数据库(Mysql/SqlService)
最近因为项目需要,研究了下EF的读写分离,所以做了一个demo进行测试,下面是项目的结构 表现层view 主要提供Web.WebApi等表现层的解决方案 公共层public 主要提供项目公共类库,数据 ...
- Windows系统前端常用PS快捷键：
1.设置滚轮放大缩小: 编辑--首选项--常规--用滚轮缩放 2.V 移动 ctrl+v 自动选中(图层), 3.M 选框 Shift+M 变换形状 Alt :确定圆形/矩形中心 Shift: 圆形/ ...
- 利用base64库暴力破解base加密
做个base加密题python语法出了一堆错误..... 附上py中关于base加密/解码的知识:http://www.open-open.com/lib/view/open1433990719973 ...
- POJ 1845-Sumdiv 题解（数论，约数和公式，逆元，高中数学）
题目描述 给定A,B,求A^B的所有因数的和,再MOD 9901 输入 一行两个整数 A 和 B. 输出 一行,一个整数 样例输入 2 3 样例输出 15 提示 对于100%的数据满足:0 <= ...
- 使用zabbix_agent监控第一台windows服务器
解压windows客户端压缩包 bin目录下会有win32和win64俩个文件夹,根据windows系统的版本自行进行选择,将客户端程序文件拷贝至C:\zabbix 将conf文件中的zabbix_a ...
- oracle学习笔记(2)-基本术语
oracle基本术语 先上图. 相当粗糙的一个图,可能有些地方不够精细,大致结构基本是对的. 逻辑结构上从大到小的依次为文件(file)->表空间(tablespace)->段(segme ...