移动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 ...
随机推荐
- 【ZJOI2017 Round2练习&BZOJ4826】D1T2 sf（主席树，单调栈）
题意: 思路:From http://blog.csdn.net/neither_nor/article/details/70211150 对每个点i,单调栈求出左边和右边第一个大于i的位置,记为l[ ...
- [JavaEE] Implement a REST Endpoint
1. Create a rest folder with JAXRSConfiguration.java: package com.pluralsight.bookstore.rest; import ...
- C++学习之继承中的访问控制
我们通常认为一个类有两种不同的用户:普通用户 和 类的实现者.其中,普通用户编写的代码使用类的对象,这部分代码只能访问类的公有(接口)成员:实现者则负责编写类的成员和友元的代码,成员和友元既能访问类的 ...
- Andriod实现刮刮卡的效果
思想: 将一个View设计成多层,内层(包含中奖信息)和外层(用于刮奖),外层的图层用Canvas与一个Bitmap关联,用这个关联的Bitmap来处理手势的滑动.类似于刮奖的动作. 使用paint. ...
- 对Socket CAN的理解（4）——【Socket CAN接收数据流程】
转载请注明出处:http://blog.csdn.net/Righthek 谢谢! 如今我们来分析一下CAN总线的接收数据流程,对于网络设备.数据接收大体上採用中断+NAPI机制进行数据的接收.相同. ...
- android:怎样在TextView实现图文混排
我们通常在TextView文本中设置文字.但是怎样设置图文混排呢? 我就在这里写一个样例 .我们须要用到一点简单的HTML知识 在TextView中预订了一些类似HTML的标签,通过标签能够使Text ...
- 通过scp批量推送文件到远程目录
[root@openfire1 script]# cat test.sh #!/bin/bash #通过scp推送文件到远程目录 for ip in `cat iplist` do ...
- Batch 拷贝远程机器文件到本机指定目录下
net use * /del /yesNET USE Y: \\远程机IP\d$ 登录密码 /user:domain\登录用户 set sourcePath="Y:\DOAutomatio ...
- 【转】android-修改TextView中部分文字的颜色
textView = (TextView) findViewById(R.id.textview); SpannableStringBuilder builder = new SpannableStr ...
- C# 学习笔记 三层架构系列（控件一）
下面是我两周的学习总结:这是我写给自己的,如果哪位朋友有幸看到这篇文章就是缘分.如果所说的内容不对,就请纠正.勿喷!!! 想要将两周的学习知识通过文字.通过代码.通过图片储备起来,以防自己那天思维短路 ...