touch事件应用
js的touch事件,一般用于移动端的触屏滑动:
$(function(){
document.addEventListener("touchmove", _touch, false);}) function _touch(event){alert(1);
}
touchstart:当手指触摸屏幕时触发;即使已经有一个手指放在了屏幕上也会触发。
touchmove:当手指在屏幕上滑动时连续的触发。在这个事件发生期间,调用preventDefault()可阻止滚动。
touchend:当手指从屏幕上移开时触发。
touchcancel:当系统停止跟踪触摸时触发。关于此事件的确切触发事件,文档中没有明确说明。
以上事件的event对象上面都存在如下属性:
touches:表示当前跟踪的触摸操作的Touch对象的数组。
targetTouches:特定于事件目标的Touch对象的数组。
changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。
每个Touch对象包含下列属性:
clientX:触摸目标在视口中的X坐标。
clientY:触摸目标在视口中的Y坐标。
identifier:表示触摸的唯一ID。
pageX:触摸目标在页面中的x坐标。
pageY:触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。
target:触摸的DOM节点坐标
简单应用案例:
<body>
<span id="test_box" style="position:fixed;left:0px;top:0px;background-color:gainsboro;padding:15px;">123</span>
<script>
// addEventListener() 方法用于向指定元素添加事件句柄。 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。 //document.addEventListener("touchstart",touch_start,false);
//document.addEventListener("touchmove",touch_move,false);
//document.addEventListener("touchend",touch_end,false);
//document.addEventListener("touchcancel",touch_cancel,false); function touch_start(event){
alert("touch_start : 当手指触摸屏幕时触发")
} function touch_move(event){
alert("touchmove : 当手指在屏幕上滑动时连续的触发。")
} function touch_end(event){
alert("touchend : 当手指从屏幕上移开时触发")
} function touch_cancel(event){
alert("touchcancel : 当系统停止跟踪触摸时触发。")
} //应用示例,单个手指拖动盒子
var obj = document.getElementById("test_box");
obj.addEventListener('touchmove', function(event)
{ // 如果这个元素的位置内只有一个手指的话
if (event.targetTouches.length == 1)
{
var touch = event.targetTouches[0];
// 把元素放在手指所在的位置
obj.style.left = touch.pageX + 'px';
obj.style.top = touch.pageY + 'px';
}
}, false);
</script>
</body>
touch事件应用的更多相关文章
- UC浏览器中touch事件的异常记录
以前也在UC上面栽过几个坑,不过都是页面显示方面的.上个周的时候,商品详情页重做,要添加个上拉显示详情的效果. 有两个条件需要判断: 1.是否到达底部: 2.到达底部之后拖动的y轴距离. 效果写完后, ...
- 移动端开发概览【webview和touch事件】
作为一个前端,而且作为一个做移动端开发的前端,那意味着你要有三头六臂,跟iOS开发哥哥一起打酱油,跟Android开发哥哥一起修bug... Android vs Ios 我在webkit内核的chr ...
- 手持设备点击响应速度,鼠标事件与touch事件的那些事
前言 现在一直在做移动端的开发,这次将单页应用的网页内嵌入了app,于是老大反映了一个问题:app应用点击响应慢!我开始不以为然,于是拿着网页版的试了试,好像确实有一定延迟,于是开始了研究,最后选择了 ...
- 第六课 touch事件
1.移动端页面在PC上浏览时,限制宽度的方法: 2.移动端页面切换设备时自动刷新页面的方法: 3.touch事件 touchstart:当手指触摸屏幕时触发.通过addEventListener添加移 ...
- 原生js移动端touch事件实现上拉加载更多
大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...
- js的touch事件的实际引用
一开始做前端页面的时候,接触的也是js,但是随后便被简单高效的jquery吸引过去,并一直使用至今. 而js,则被我主观的认为底层技术而抛弃. 直到这几天工作需要,研究移动端页面的触屏滑动事件,搜索j ...
- H5中的touch事件
touch中共有touchstart.touchmove和touchend三个事件: touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时候触发 touchend:触摸结 ...
- javascript移动设备Web开发中对touch事件的封装实例
在触屏设备上,一些比较基础的手势都需要通过对 touch 事件进行二次封装才能实现.zepto 是移动端上使用率比较高的一个类库,但是其 touch 模块模拟出来的一些事件存在一些兼容性问题,如 ta ...
- Android Touch事件传递机制 二:单纯的(伪生命周期)
转载于:http://blog.csdn.net/yuanzeyao/article/details/38025165 在前一篇文章中,我主要讲解了Android源码中的Touch事件的传递过程,现在 ...
- Android Touch事件传递机制 一: OnTouch,OnItemClick(监听器),dispatchTouchEvent(伪生命周期)
ViewGroup View Activity dispatchTouchEvent 有 有 有 onInterceptTouchEvent 有 无 无 onTouchEvent 有 有 有 例 ...
随机推荐
- 方格取数洛谷p1004
题目描述 设有N*N的方格图(N<=9),我们将其中的某些方格中填入正整数,而其他的方格中则放 人数字0.如下图所示(见样例): A 0 0 0 0 0 0 0 0 0 0 13 0 0 6 0 ...
- unity中Ray、RaycastHit 、Raycast(小白之路)
1.Ray Ray(Vector3 origin, Vector3 direction) Ray:在程序中可以理解为射线,就是以某个位置(origin)朝某个方向(direction)的一条射线,是一 ...
- POJ1837--二维背包
Balance Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 13525 Accepted: 8474 Description ...
- CCF-201409-3-字符串匹配
问题描述 试题编号: 201409-3 试题名称: 字符串匹配 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 给出一个字符串和多行文字,在这些文字中找到字符串出现的那些行.你 ...
- SQL Server学习之路(六):“增删改查”之“查”
0.目录 1.前言 2.最基本的SQL查询语句 3.select...from... 3.1 "*"与"Top num *" 3.2 查询指定列 3.3 Isn ...
- Scala入门系列(九):函数式编程
引言 Scala是一门既面向对象,又面向过程的语言,Scala的函数式编程,就是Scala面向过程最好的佐证.也真是因此让Scala具备了Java所不具备的更强大的功能和特性. 而之所以Scala一直 ...
- java web学习笔记 jstl
(尊重劳动成果,转载请注明出处:http://blog.csdn.net/qq_25827845/article/details/53311722 冷血之心的博客) 一.JSTL标签介绍 1.什么是 ...
- 495A - Digital Counter
A. Digital Counter time limit per test 1 second memory limit per test 256 megabytes input standard i ...
- Launcher知识的demo,手机管家小伙家与悬浮窗
Launcher知识的demo.主要仿的手机管家小伙家与悬浮窗的效果.东西比較简单.直接贴代码 主要用到了windowManager 中的更新updateViewLayout(view,params) ...
- [UWP]本地化入门
1. 前言 上一篇文章介绍了各种WPF本地化的入门知识,这篇文章介绍UWP本地化的入门知识. 2. 使用resw资源文件实现本地化 在以前的XAML平台,resx资源文件是一种很方便的本地化方案,但在 ...