移动端关于拖拽事件

最新推荐文章于 2024-05-15 17:05:01 发布

dmbi4763

最新推荐文章于 2024-05-15 17:05:01 发布

阅读量790

点赞数

文章标签：移动开发

原文链接：http://www.cnblogs.com/EazyBlog/p/5264149.html

版权

探究一下移动端的拖拽！因为html5出来了一个drag么！然后就兴致勃勃的去试了试，结果发现drag在pc端使用好使，但是在移动端不好用，然后在网上查了一下，有关于各个浏览器对drag的支持状况，在此附上链接一枚（想具体了解可以看看）：

http://caniuse.com/#search=Drag

没办法就就开始想别的办法，结果发现好多人用touch事件，所以便试了试，效果还算不错，自己写的就不上代码了，就把参考的一片文章附上供大家参考参考：

----------------------------------------精华就要分享嘛！

在开始描述touch事件之前，需要先描述一下多触式系统中特有的touch对象（android和iOS乃至nokia最新的meego系统都模拟了类似的对象）。这个对象封装一次屏幕触摸，一般来自于手指。它在touch事件触发的时候产生，可以通过touch event handler的event对象取到。

移动端触屏滑动的效果其实就是图片轮播，在PC的页面上很好实现，绑定click和mouseover等事件来完成。但是在移动设备上，要实现这种轮播的效果，就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。

以下是四种touch事件
touchstart: //手指放到屏幕上时触发
touchmove: //手指在屏幕上滑动式触发
touchend: //手指离开屏幕时触发
touchcancel: //系统取消touch事件的时候触发，这个好像比较少用

每个触摸事件被触发后，会生成一个event对象，event对象里额外包括以下三个触摸列表

touches: //当前屏幕上所有手指的列表
targetTouches: //当前dom元素上手指的列表，尽量使用这个代替touches
changedTouches: //涉及当前事件的手指的列表，尽量使用这个代替touches
这些列表里的每次触摸由touch对象组成，touch对象里包含着触摸信息，主要属性如下：
clientX / clientY: //触摸点相对浏览器窗口的位置
pageX / pageY: //触摸点相对于页面的位置
screenX / screenY: //触摸点相对于屏幕的位置
identifier: //touch对象的ID
target: //当前的DOM元素

注意：

手指在滑动整个屏幕时，会影响浏览器的行为，比如滚动和缩放。所以在调用touch事件时，要注意禁止缩放和滚动。

1.禁止缩放
通过meta元标签来设置。

2.禁止滚动
preventDefault是阻止默认行为，touch事件的默认行为就是滚动。
event.preventDefault();

在此附上一个案例：可以自己去试试^_^

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">

<title>移动端触摸滑动</title>

<meta name="author" content="rainna" />

<meta name="keywords" content="rainna's js lib" />

<meta name="description" content="移动端触摸滑动" />

<meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no">

<style>

*{margin:0;padding:0;}

li{list-style:none;}.m-slider{width:600px;margin:50px 20px;overflow:hidden;}

.m-slider .cnt{position:relative;left:0;width:3000px;}

.m-slider .cnt li{float:left;width:600px;}

.m-slider .cnt img{display:block;width:100%;height:450px;}

.m-slider .cnt p{margin:20px 0;}

最低0.47元/天解锁文章

dmbi4763

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
移动端关于拖拽事件

探究一下移动端的拖拽！因为html5出来了一个drag么！然后就兴致勃勃的去试了试，结果发现drag在pc端使用好使，但是在移动端不好用，然后在网上查了一下，有关于各个浏览器对drag的支持状况，在此附上链接一枚（想具体了解可以看看）：http://caniuse.com/#search=Drag没办法就就开始想别的办法，结果发现好多人用touch事件，所以便试了试，效果还...
复制链接

扫一扫