移动端事件（touchstart、touchmove、touchend）--移动端开发整理笔记（三）
移动端事件
三个事件
- touchstart 手指触摸 相当于PC端 mousedown
- touchend 手指抬起 相当于PC端 mouseup
- touchmove 手指滑动 相当于PC端 mousmove
注意： touch事件在chrome的模拟器下，部分版本通过on的方式来添加事件无效，这时候需要事件监听的方法 addEventListener("事件名",函数,冒泡或捕获)，它有以下优点：
不会存在事件前后覆盖问题
在chrome的模拟器下可以一直识别
写法如下：
box.addEventListener(
"touchstart",
function(ev) {
console.log(1);
}
);
阻止默认事件
box.addEventListener(
"touchstart",
function(ev) {
console.log(1);
}
);
ev.preventDefault(); // 阻止默认事件
以上阻止掉：document touchstart的默认事件，可以解决一下问题：
阻止页面上的文字被选中 -- 可以通过阻止冒泡使某个元素上的文字被选中
阻止页面上的系统菜单
隐患: 页面上的所有滚动条失效
阻止 document的 touchstart 或者 touchmove，可以清除系统默认的回弹
事件点透
在移动端 PC事件（如mouseover） 有 300ms的延迟
点击了页面之后，浏览器会记录点击下去的坐标
300ms后，在该坐标找到现在在这的元素 执行事件
解决方法：
阻止默认事件 (部分安卓机型不支持)
不在移动端使用鼠标事件，不用a标签做页面跳转
防止误触
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,user-scalable=no" />
<title>无标题文档</title>
<style>
a {
display: block;
width: 50px;
height: 50px;
background: red;
color: #fff;
margin: 20px;
}
</style>
<script>
/*防止误触，先清除掉浏览器的默认事件 这时候 点击a标签失效不会跳转 手机浏览器的自带滚动条失效*/
document.addEventListener(
"touchstart",
function(e) {
e.preventDefault();
}
);
window.onload = function () {
var a = document.querySelectorAll("a");
for(var i = 0; i < a.length; i++) {
a[i].addEventListener(
"touchmove",
function() {
this.isMove = true; //给当前元素添加自定义属性isMove 让他等于true； 如果在元素上移动以后就等于true
}
);
a[i].addEventListener(
"touchend",
function() {
if(!this.isMove) {
window.location.href = this.href; //这里判断 的是如果没有移动的话就是点击。根据当前元素的链接通过window.location.href跳转
}
this.isMove = false; //跳转完成以后恢复到false
}
);
}
};
</script>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com">百度</a>
</body>
</html>
touchEvent
touches 当前屏幕上的手指列表
targetTouches 当前元素上的手指列表
changedTouches 触发当前事件的手指列表
每个Touch对象包含的属性如下。
clientX：触摸目标在视口中的x坐标。
clientY：触摸目标在视口中的y坐标。
identifier：标识触摸的唯一ID。
pageX：触摸目标在页面中的x坐标。
pageY：触摸目标在页面中的y坐标。
screenX：触摸目标在屏幕中的x坐标。
screenY：触摸目标在屏幕中的y坐标。
target：触目的DOM节点目标。
force: 压力大小，是从0.0(没有压力)到1.0(最大压力)的浮点数
移动端事件（touchstart、touchmove、touchend）--移动端开发整理笔记（三）的更多相关文章
- 移动端的touchstart,touchmove,touchend事件中的获取当前touch位置
前提:touchstart,touchmove,touchend这三个事件可以通过原生和jq绑定. 原生:document.querySelector("#aa").addEven ...
- 获取touchstart,touchmove,touchend 坐标
简单说下如何用jQuery 和 js原生代码获取touchstart,touchmove,touchend 坐标值: jQuery 代码: $('#id').on('touchstart',funct ...
- 移动端touch与click区别--移动端开发整理笔记（五）
移动端用touch还是click? 在移动端开发中,click事件有300ms的延时,由来源于iphone处理双击缩放功能种下的坑.因为用手指在屏幕上快速点击两次,iOS 自带的 Safari 浏览器 ...
- 移动端touchstart,touchmove,touchend
近段时间使用html5开发一个公司内部应用,而触摸事件必然是移动应用中所必须的,刚开始以为移动设备上或许也会支持鼠标事件,原来是不支持的,好在webkit内核的移动浏览器支持touch事件,并且打包成 ...
- touchstart,touchmove,touchend触摸事件的小小实践心得
近段时间使用html5开发一个公司内部应用,而触摸事件必然是移动应用中所必须的,刚开始以为移动设备上或许也会支持鼠标事件,原来是不支持的,好在webkit内核的移动浏览器支持touch事件,并且打包成 ...
- meta设置与去除默认样式--移动端开发整理笔记（一）
视口设置: <meta name="viewport" content="width=device-width,user-scalable=no,initial-s ...
- 移动端事件touchstart、touchmove、touchend
关于这三个移动端的事件,详细的资料网上一搜一大片,我就不浪费时间了 1.移动端长按事件 var timer = null; $(ele).on('touchstart',function(){ tim ...
- 手机端touchstart,touchmove,touchend事件，优化用户划入某个可以点击LI的效果
在我们滑动手机的时候,如果LI或者DIV标签可以点击,那么在移动端给用户一个效果 /*id为添加效果LI上的UL的ID,或者是当前DIV的ID*/ function doTouchPublic(id) ...
- touchstart,touchmove,touchend事件 写法
jQuery写法: $('#id').on('touchstart',function(e) { var _touch = e.originalEvent.targetTouches[0]; var ...
随机推荐
- http与tcp,udp的区别
1.网络协议的概念 (1)在学习网络课程的时候,老师会讲iso七层模型,有应用层 表示层 会话层 传输层 网络层 数据链路层 物理层,其中http就属于应用层,tcp与udp是属于传输层,如图1.1( ...
- golang 1.12 自动补全
golang 1.12 版本的自动补全问题 问题 golang 1.12 开始, 默认的 go install 不再生成 pkg 文件. 所以对第三方库的引用, 无法进行代码的自动补全. 解决方法 g ...
- Zuul的高级使用
原文链接:https://blog.csdn.net/u011820505/article/details/79373594
- enum一个最不像class的class
enum一个最不像class的classjava枚举类型是jdk5出现的.它的出现主要为了解决一些有特殊意义,已经确定的,长度不会改变的集合. //月份描述 public class Month { ...
- UML类图记忆口诀
UML类图在设计模式书籍中用的比较多,经常忘记,口诀挺重要的,比如我们从小到大,除了乘法口诀.元素周期表等口诀形式的知识,其它的知识都基本忘记了, 所以编写口诀如下 1.三级石 2.见关一 3.零足迹 ...
- Prometheus 告警分配到指定接收组
Prometheus 告警分配到指定接收组 route属性用来设置报警的分发策略,它是一个树状结构,按照深度优先从左向右的顺序进行匹配. 主要处理流程:1. 接收到Alert,根据labels判断属于 ...
- 关于thinkphp3.2.3集成phpmailer
关于thinkphp3.2.3集成phpmailer 1 我用的是phpmailer5.1的版本 先把文件解压缩放到这个位置 2 封装到函数里面 function email($email,$tit ...
- PHP 垃圾回收机制详解
前言:之前对PHP的GC只是了解了个大概,这次详细了解下PHP的垃圾回收机制(GC). 介于网上大部分都是PHP5.X的GC,虽然 php5 到 php7 GC部分做出的改动较小,但我觉得还是一起写下 ...
- ASP.NET MVC+Easyui 后台管理系统的图片上传
实现图片的上传 easyui代码部分: //添加按钮 var URL; $("#btnCreate").click(function () { $('#UserDialog').d ...
- Vuex实现状态管理
Vuex使用总结 1 Vuex简介 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,Vuex抽取了各个组件的共享部分,以全局单例模式进行状态的管理.在原生vue中各个组件之间传值使用的 ...