移动端事件（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 ...
随机推荐
- GreenPlum 大数据平台--增加segment
01,增加机器的配置 需要增加的机器安装greenplum 软件(操作见greenplum安装部署章节) 02,分配机器存储区域 03,配置互信 使用gpssh-exkeys确保Segment主机能通 ...
- [转载]3.3 UiPath鼠标操作图像的介绍和使用
一.鼠标(mouse)操作的介绍 模拟用户使用鼠标操作的一种行为,例如单击,双击,悬浮.根据作用对象的不同我们可以分为对元素的操作.对文本的操作和对图像的操作 二.鼠标对图像的操作在UiPath中的使 ...
- logback&log4j异步日志配置
logback 原始配置 配置 appender, 控制文件的滚动方式,日志的输出格式. <appender name="method-time-appender" clas ...
- C# 使用ConcurrentBag类处理集合线程安全问题
在日常的开发中,经常会遇到多个线程对同一个集合进行读写操作,就难免会出现线程安全问题. 以下代码,如果使用List<T>就会遇到问题:System.InvalidOperationExce ...
- SpringBoot整合SpringDataJPA及在页面yaml中显示
SpringBoot整合SpringDataJPA及在页面yaml中显示 1:创建对应的数据表 2:添加依赖 3:配置数据源 1:创建对应的数据表 CREATE TABLE `user` ( `id` ...
- Linux 安装Redis4.0.8【yum安装】
.下载yum源 yum install epel-release2.安装redisyum install redis3.启动redis # 启动redis service redis start # ...
- WPF 精修篇 移动TranslateTransform
原文:WPF 精修篇 移动TranslateTransform 移动 TranslateTransform X 移动X轴 Y 移动Y轴 <StackPanel Orientation=" ...
- （二）RFB协议具体通信说明
. 消息说明 8.1 握手消息 8.1.1 RFB协议版本号 1.vnc服务器发送所能够支持的最高RFB协议版本号给客户端,格式如下: “RFB xxx.yyy\n”共12b ...
- JS基础 —— 数据类型
JS数据类型分为简单数据类型(基本数据类型)和复杂数据类型(引用数据类型). 基本数据类型:Undefined.Null.Boolean.Number.String.Symbol. 引用数据类型:Ob ...
- EF自动创建数据库步骤之一(实体类写法)
文章演示使用EF自动创建数据库第一个步骤创建实体类. 一.创建表映射实体类 using System; using System.Collections.Generic; using System.C ...