移动端事件（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 ...
随机推荐
- 微信小程序绑定列表数据
js代码 Page({ /** * 页面的初始数据 */ data: { words:[] } wxml代码 <view wx:for="{{words}}" class=' ...
- ASPNETCore开源日志面板 ：LogDashboard
LogDashboard logdashboard是在github上开源的aspnetcore项目, 它旨在帮助开发人员排查项目运行中出现错误时快速查看日志排查问题 通常我们会在项目中使用nlog.l ...
- server 2012 r2 配置
filezilla的问题还是让人摸不着头脑,配置和别的机器上一样就是报STL权限错误,最后换了个端口就连上了. 服务器,填远端IP,被动模式打开,生成一个证书,被动模式的商品一定要在入站规则里 客户端 ...
- linux centos安装教程
linux centos安装教程1 CentOS-7-x86_64-DVD-1511.iso 这个是dvd版本 2 CentOS-7-x86_64-Minimal-1511.iso 这个迷你版 是没有 ...
- SSM基本依赖及配置
需要了解具体配置文件的作用到:SSM基本配置详解 示例项目:SSMDemo 依赖 基本依赖 <properties> <spring.version>5.0.6.RELEASE ...
- 【模板整合计划】NB数论
[模板整合计划]NB数论 一:[质数] 1.[暴力判] 素数.コンテスト.素数 \(\text{[AT807]}\) #include<cstdio> #include<cmath& ...
- c# 自定义验证登录（Authorize）
我们的项目本来是用azure的auth认证,是用过程中发现登录速度太慢了,所以还是自己搞一个吧,没想到搞起来挺简单的,不是用一个专门的认证服务器哈,就是一个简单的工具类. 验证是否登录的类 /// & ...
- PIE SDK图像重采样算法
1.算法功能简介 图像重采样是指对采样后形成的由离散数据组成的数字图像按所需的像元位置或像元问距重新采样,以构成几何变换后的新图像.重采样过程本质上是图像恢复过程,它用输入的离散数字图像重建代表原始图 ...
- Laravel API跨域访问的实现步骤
本篇文章给大家带来的内容是关于Laravel API跨域访问的实现步骤,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 服务器A请求服务器B的接口,那么一般会出现跨域问题. 1 XML ...
- JS树结构转list结构
树转list /** * 树转list */ function treeToList(tree){ for(var i in tree){ var node = tree[i]; list = []; ...