移动端事件（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 ...
随机推荐
- Windows 有没有办法查看文件被哪个进程占用
经常当我们删除文件时,有时会提示[操作无法完成,因为文件已在另一个程序中打开,请关闭该文件并重试],到底是哪些程序呢? 有时候一个一个找真不是办法,已经被这个问题折磨很久了,今天下决心要把它解决,找到 ...
- MVC+Ninject+三层架构+代码生成 -- 总结（三、實體類）
一.動軟代碼生成器生成 實體類 2.VS視圖--實體類,其中Condition文件夾是存放 搜索的分頁信息 using System; using System.Collections.Generic ...
- Java反射复习
三种实例化对象: 1.Class<?> cls = Class.forName("java.util.Date") ; *** System.out.println(c ...
- $.ajax()方法
1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如 ...
- C#根据流下载文件
C#从服务器下载文件可以使用下面4个方法:TransmitFile.WriteFile.WriteFile和流方式下载文件,并保存为相应类型,方法如下: .TransmitFile实现下载 prote ...
- EF 通过导航添加数据
Fluent Api是指定模型与数据库表之间的对应关系 //一对多 this.HasOptional(x => x.主表).WithMany(x => x.多表).HasForeignKe ...
- checkbox实现单选
脚本: function bb(obj,name) { var aa = document.getElementsByName(name); for (var i = 0; i < aa.len ...
- 初学Mybatis
首先配置mybatis配置文件 <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" &qu ...
- MES助力伊利集团打造智慧工厂
1.项目背景介绍 在国家政策和事业部.工厂的实际需求双重背景下,2016年7-9月期间,伊利集团信息部门.业务部门,先后与国内外领先的设备和咨询公司进行了智能制造.智慧工厂等话题的沟通交流,并组织实地 ...
- Kubernetes概念之mater、node
很久没写博客了,终于把重心找回来了,不过没有以前有斗志.有理想.有目标了.慢慢来.你若问我我最近几年的规划是什么,还真不知道.突然发现摧毁一个人真的很简单.k8s也是一遍一遍的从入门到放弃,还是要好好 ...