移动web——touch事件应用
基本概况
1、touch事件在移动端被用来代替click事件，因为click事件的触发会延迟影响了用户体验
2、touch事件还可以与translate构成吸附效果
3、现行有一种排版方式是左边宽度是固定的，右边是自适应的
4、下面通过一个项目串联起来这些知识点，顺便说下移动端静态页面设置技巧
左定宽右适应
1、左边div设置宽高和浮动，右边内容不用设置宽高，直接overflow属性设置成hidden就可以了，如果不设置此属性，就文本绕图了
2、不管你如何横向拉伸浏览器，右边都能够自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
} html, body {
width: 100%;
height: 100%;
} div:nth-child(1) {
width: 50px;
height: 200px;
background-color: #ccc;
float: left;
} div:nth-child(2) {
overflow: hidden;
}
</style>
</head>
<body>
<div></div>
<div>
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</div>
</body>
</html>
input标签自适应
1、如何input标签自适应，而不让两边的标签自适应，并且永远处于两边
2、首先左右两边标签是定位到各自位置，因为是定位所以不占位置。通栏的左右padding宽度各自取值到定位标签的宽度就行了，帮他们占位。
3、input标签宽度100%，继承通栏宽度，这样浏览器横向不管如何拉伸input标签都是自适应的
4、需要注意的是移动开发box-sizing属性设置的是border-box，下面如果不这样设置，input继承的宽100%并不是div原来的100%宽度减去padding的值，而是固定的content增加了padding，值依然不会变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
} html, body {
height: 100%;
overflow: hidden;
} div {
width: 100%;
height: 40px;
background-color: #cccccc;
position: relative;
padding-right: 50px;
padding-left: 50px; line-height: 40px;
} div span:nth-child(1) {
position: absolute;
top: 0px;
left: 0px;
width: 50px;
text-align: center;
line-height: 40px;
background-color: yellow;
} div span:nth-child(3) {
position: absolute;
top: 0px;
right: 0px;
width: 50px;
text-align: center;
line-height: 40px;
background-color: yellow;
} div input {
width: 100%;
height: 25px;
border-radius: 5px;
}
</style>
</head>
<body>
<div>
<span>占位左</span>
<input type="search" placeholder="请搜索">
<span>占位右</span>
</div>
</body>
</html>
touch模仿click事件
1、之前我们对touch事件进行了封装，那么我们如何具体应用呢？
2、在我们自己封装的fox_tap方法回调函数中，我们能够拿到此次点击的event对象，里面有我们需要的target属性，看看谁是触发者，然后利用这个触发者做一些文章，这和冒泡事件中的模态框案例是一样的原理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
} html, body {
height: 100%;
} div {
width: 50px;
height: 100%;
} div ul {
list-style: none;
width: 100%;
} div ul li {
float: left;
text-align: center;
width: 100%;
height: 40px;
line-height: 40px;
border: 1px solid #cccccc;
} .current {
background-color: red;
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="#">选择1</a></li>
<li><a href="#">选择2</a></li>
<li><a href="#">选择3</a></li>
<li><a href="#">选择4</a></li>
</ul>
</div>
<script>
var liArr = document.querySelectorAll('div ul li');
for (var i = 0; i < liArr.length; i++) {
fox_tap(liArr[i], function (e) {
console.log(e.target.tagName);
if (e.target.tagName == "A") {
for (var j = 0; j < liArr.length; j++) {
liArr[j].className = '';
}
e.target.parentNode.className = 'current';
}
})
} /*
element：绑定的dom元素
callback：回调函数
*/
function fox_tap(element, callback) {
var statTime = 0;
var isMove = false;
var maxTime = 250;
var event = null;
element.addEventListener('touchstart', function (e) {
statTime = Date.now();
/*
每次执行注册事件都要初始化此值，因为touchmove事件触发的时候会更改isMove的值，不更改，
下次再进入touchtend事件会沿用上次touchmove修改过的isMove的值，这样就一直终端函数
*/
isMove = false;
event = e;
});
element.addEventListener('touchmove', function (e) {
isMove = true;
});
element.addEventListener('touchend', function (e) {
if (isMove == true) {
return;
}
if ((Date.now() - statTime) > maxTime) {
return;
}
callback(event);
});
}
</script>
</body>
</html>
touch吸附效果
1、需求解释：所谓吸附效果其实就是我们使用手机的时候经常遇到的效果，手指按住屏幕往上或往下滑动很深的位置，所选择的区域只能往上或往下移动到一个最大范围，超过这个范围就不会再移动，随后手指移开，所选择区域会缓动的方式归位。
2、核心思想：
（1）以touchstart事件作为开始，touchmove事件不断触发作为动力，遇到最大范围，就不准再移动，区域永远定格在最大范围上；除了最大范围，中间的区域是自由移动的。
（2）以touchend事件作为结束，来计算手指离开屏幕的时候是否需要启动缓慢的归位的效果，往下滑动，只要moveDistance>0就需要归位，往上滑动，只要当moveDistance < -(Math.abs(cha))就需要归位，其他范围都是自由移动不需要归位。
（3）还有需要注意的是，归位之后，区域的移动的坐标就需要重新赋值了，没有归位的属于自由移动的也需要重新赋值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
} html, body {
width: 100%;
height: 100%;
} div {
width: 100px;
height: 100%;
overflow: hidden;
} ul {
list-style: none;
width: 100%;
} li {
width: 100%;
height: 60px;
text-align: center;
line-height: 60px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
</ul>
</div>
<script>
var div = document.querySelector('div');
var ul = document.querySelector('ul');
var divH = div.offsetHeight;
var ulH = ul.offsetHeight;
var cha = ulH - divH;//这是ul比div大的差值
var range = 100;//这是移动的范围值
var maxRange = -(Math.abs(cha) + range); var startY = 0;
var moveY = 0;
var distance = 0;
ul.addEventListener('touchstart', function (e) {
ul.style.transition = '';
startY = e.touches[0].clientY;
});
ul.addEventListener('touchmove', function (e) {
//每次移动都会触发touchmove事件,意味着每次都会更新translate的值
moveY = e.touches[0].clientY - startY; //当往下拖动的距离大于range时，我们将ul定死在range上
//当往上拖动的距离大于maxRange时，我们将ul定死在maxRange上
//其他范围，ul都可以自由上下移动
var moveDistance = distance + moveY;
if (moveDistance >= range) {
ul.style.transform = 'translateY(' + range + 'px)';
} else if (moveDistance <= maxRange) {
ul.style.transform = 'translateY(' + maxRange + 'px)';
} else {
ul.style.transform = 'translateY(' + moveDistance + 'px)';
}
});
//touchend事件就需要开始我们的吸附效果
//1、当ul在touchmove事件中移动的距离大于0，我们就将他归位，别忘了归完之后需要将distance重新赋值
//2、当ul在touchmove事件中移动的距离小于-(Math.abs(cha)),我们就将其归位到-(Math.abs(cha))位置
ul.addEventListener('touchend', function (e) {
var moveDistance = distance + moveY;
if (moveDistance >= 0) {
ul.style.transition = 'all .5s';
ul.style.transform = 'translateY(0px)';//回归原位
distance = 0;
} else if (moveDistance < -(Math.abs(cha))) {
ul.style.transition = 'all .5s';
ul.style.transform = 'translateY('+(-(Math.abs(cha)))+'px)';//回归原位
distance = -(Math.abs(cha));
} else {
distance = moveDistance;
}
});
</script>
</body>
</html>
移动web——touch事件应用的更多相关文章
- 移动web touch事件
参考:http://www.cnblogs.com/dojo-lzz/p/5452575.html wap中的原生touch 事件,touchstart.touchmove.touchend.touc ...
- 移动web——touch事件介绍
基本概念 1.在移动web端点击事件或者滑动屏幕.捏合等动作都是由touchstar.touchmove.touchend这三个事件组合在一起使用的 2.click事件在移动端会有0.2秒的延迟,下面 ...
- Touch事件在移动端web开发中的详解
一.pc端事件回顾 HTML事件.DOM0事件.DOM2事件 事件对象. 如果上述概念不清楚,请先去了解. 二.移动端事件简介 2.1 pc端事件在移动端的问题 移动设备主要特点是不配备鼠标,键盘 ...
- 移动端Web界面滚动touch事件
解决办法一: elem.addEventListener( 'touchstart', fn, { passive: false } ); 解决办法二: * { touch-action: pan-y ...
- 从零开始学 Web 之 移动Web（五）touch事件的缺陷，移动端常用插件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- javascript移动设备Web开发中对touch事件的封装实例
在触屏设备上,一些比较基础的手势都需要通过对 touch 事件进行二次封装才能实现.zepto 是移动端上使用率比较高的一个类库,但是其 touch 模块模拟出来的一些事件存在一些兼容性问题,如 ta ...
- 移动web开发之touch事件
前面的话 iOS版Safari为了向开发人员传达一些特殊信息,新增了一些专有事件.因为iOS设备既没有鼠标也没有键盘,所以在为移动Safari开发交互性网页时,常规的鼠标和键盘事件根本不够用.随着An ...
- 移动端开发概览【webview和touch事件】
作为一个前端,而且作为一个做移动端开发的前端,那意味着你要有三头六臂,跟iOS开发哥哥一起打酱油,跟Android开发哥哥一起修bug... Android vs Ios 我在webkit内核的chr ...
- mobile touch事件
touch.js 众所周知,mobile与pc 前端开发的不同中,有一点就是事件的不同,mobile上有touchstart,touchmove,touchend等,而pc上用最多的应该还是我们的cl ...
随机推荐
- [codevs 1183][泥泞的道路（二分+spfa）
题目:http://dev.codevs.cn/problem/1183/ 分析:这个和最优比率生成树很像,都可以二分答案的,只不过判定方面一个是求是否有最短路径,一个是求是否有生成树.假设等待判定的 ...
- - > 网络流（草地排水）
网络流(Dinic(模板)) Drainage Ditches Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 ...
- - > 动规讲解基础讲解八——正整数分组
将一堆正整数分为2组,要求2组的和相差最小.例如:1 2 3 4 5,将1 2 4分为1组,3 5分为1组,两组和相差1,是所有方案中相差最少的. 整数个数n<=100,所有整数的和<=1 ...
- Ubuntu 16.04下没有“用户和组”功能的问题解决
在16.04以前的版本会自带“用户和组”的功能,但是在16.04发现系统只自带了“用户账户”的功能. 问题解决: 1.安装gnome-system-tools sudo apt-get install ...
- Tomcat配置文件server.xml（转）
前言 Tomcat隶属于Apache基金会,是开源的轻量级Web应用服务器,使用非常广泛.server.xml是Tomcat中最重要的配置文件,server.xml的每一个元素都对应了Tomcat中的 ...
- 9、Java并发性和多线程-线程安全与共享资源
以下内容转自http://ifeve.com/thread-safety/: 允许被多个线程同时执行的代码称作线程安全的代码.线程安全的代码不包含竞态条件.当多个线程同时更新共享资源时会引发竞态条件. ...
- MAPZONE GIS SDK接入Openlayers3之四——高级标注效果实现
首先看实现效果: 实现要点: 1)树形标注实现 2)复杂标注样式定义 3)效率优化 1.树形标注实现 树形标注采用字体符号来实现,包括以下几个步骤 1)载入字体 2)设置标注值与字体对照关系 3)设置 ...
- event loop js事件循环 microtask macrotask
转: 原文 http://blog.csdn.net/sjn0503/article/details/76087631 ---------------------------------------- ...
- 1.3－动态路由协议EIGRP
EIGRP(Enhanced IGRP) EIGRP的特点: IGRP/EIGRP都是CISCO的私有协议. 1:是唯一的一种LS/DV的混合协议. 2:Rapid convergence EIGRP ...
- 【翻译自mos文章】rman 标准版和企业版的兼容性
rman 标准版和企业版的兼容性 来源于: RMAN Standard and Enterprise Edition Compatibility (文档 ID 730193.1) 适用于: Oracl ...