touchstart,touchmove,touchend触摸事件的小小实践心得
近段时间使用html5开发一个公司内部应用,而触摸事件必然是移动应用中所必须的,刚开始以为移动设备上或许也会支持鼠标事件,原来是不支持的,好在webkit内核的移动浏览器支持touch事件,并且打包成app也毫无压力。原本以为touch事件应该跟鼠标事件是一样的道理,实践过程中虽然不难,但还是碰到了不少坑,才发现还是略有区别的。
$(document).bind(touchEvents.touchstart, function (event) {
event.preventDefault(); });
$(document).bind(touchEvents.touchmove, function (event) {
event.preventDefault(); }); $(document).bind(touchEvents.touchend, function (event) {
event.preventDefault(); });/* 何问起 hovertree.com */
很多博文中称touch的三个事件都有targetTouches,touches以及changedTouches对象列表,其实不然,touchend事件中应该是只有个changedTouches触摸实例列表的,而且这里说明一下,回调函数的event只是一个普通的object对象,实际上event中有一个originalEvent属性,这才是真正的touch事件,这个事件中才存在着上诉三个触摸实例列表,这三个实例存储了触摸事件的位置等等属性,类似于鼠标事件。其他地方基本与鼠标事件是一致的。简单介绍一下这三个触摸列表,touches是在屏幕上的所有手指列表,targetTouches是当前DOM上的手指列表,所以当手指移开触发touchend事件时,event.originalEvent是没有这个targetTouches列表的,而changedTouches列表是涉及当前事件的列表,例如touchend事件中,手指移开。接下来谈谈pc与移动端的适配问题,既然使用html5,当然是看中他的跨平台特性了,不仅仅要ios和android适配,pc上直接打开网页最好也是可以的,但是pc上只支持鼠标事件怎么办。好办,仔细观察上面代码的触摸事件,touchEvents.touchXXX,看如下代码:
var touchEvents = {
touchstart: "touchstart",
touchmove: "touchmove",
touchend: "touchend", /**
* @desc:判断是否pc设备,若是pc,需要更改touch事件为鼠标事件,否则默认触摸事件
*/
initTouchEvents: function () {
if (isPC()) {
this.touchstart = "mousedown";
this.touchmove = "mousemove";
this.touchend = "mouseup";
}
}
};
/* hwq2.com */
若在pc上,则使用鼠标事件,在移动设备中,就使用触摸事件,就这么简单,判断是否pc也很方便,就不做多解释了。
使用示例:http://www.cnblogs.com/roucheng/p/texiao.html
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 ...
- 移动端touchstart,touchmove,touchend
近段时间使用html5开发一个公司内部应用,而触摸事件必然是移动应用中所必须的,刚开始以为移动设备上或许也会支持鼠标事件,原来是不支持的,好在webkit内核的移动浏览器支持touch事件,并且打包成 ...
- 手机端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 ...
- JQuery 获取touchstart,touchmove,touchend 坐标
JQuery写法: $('#id').on('touchstart',function(e) { var _touch = e.originalEvent.targetTouches[0]; var ...
- jQuery的touchstart,touchmove,touchend的获取位置
$('#webchat_scroller').on('touchstart',function(e) { var touch = e.originalEvent.targetTouches[0]; v ...
- JQuery获取touchstart,touchmove,touchend坐标
$('#id').on('touchstart',function(e) { ].pageX; }); JQuery如上. document.getElementById("id" ...
- JS事件监听手机屏幕触摸事件 Touch
JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t ...
随机推荐
- Java NIO4:Socket通道
Socket通道 上文讲述了通道.文件通道,这篇文章来讲述一下Socket通道,Socket通道与文件通道有着不一样的特征,分三点说: 1.NIO的Socket通道类可以运行于非阻塞模式并且是可选择的 ...
- Python黑帽编程 3.3 MAC洪水攻击
Python灰帽编程 3.3 MAC洪水 传统的交换机(我只对我目前使用的交互机做过测试,按照常识只能这样表述)在数据转发过程中依靠对CAM表的查询来确定正确的转发接口,一旦在查询过程中无法找到相关目 ...
- IOS SWIFT 启动流程学习
其实和我们java.c一样通过一个main函数作为入口. main封装在了UIApplicationMain里面.所以后者变成启动入口. 他会扫描Info.plist,找到需要加载的入口storybo ...
- 解决 Visual Studio 2017 RC 不兼容低版本 Visual Studio 创建的 MVC 4 项目的问题
1.使用文本编辑器(如Visual Studio Code 或 notepad)打开 MVC 4 项目的 .csproj 文件 2.找到代码(可能会有不同)<ProjectTypeGuids&g ...
- Atitti 大话存储读后感 attilax总结
Atitti 大话存储读后感 attilax总结 1.1. 大话存储中心思想(主要讲了磁盘文件等存储)1 1.2. 最耐久的存储,莫过于石头了,要想几千万年的存储信息,使用石头是最好的方式了1 1.3 ...
- 【最后的抒情】【离NOIP还有9个小时】
学了NOIP 大概十一个月左右,中途的插班生.从2015年12月底开始学信息竞赛,在寒假的时候还笑着我还有九个月才考试呢,生竞就只有两个月了.没错我是从生物竞赛转过来的.记得当初写申请的时候,写的理由 ...
- 虚拟机网络驱动(共享文件夹)不见了的解决方案-适用于win7~win10 and Windows Server 2008~Windows Server 2012R2
具体看图 手动打入下面选择部分的字符 \\vmware-host\Shared Folders 然后就可以了,这边有个红叉,重启后就没了 重启后
- LINQ系列:LINQ to SQL Concat/Union
1. Concat 单列Concat var expr = (from p in context.Products select p.ProductName) .Concat( from c in c ...
- Vue.js学习笔记(4)
分享一段将 json数组数据以 csv格式导出的代码: html: <button class="btn btn-danger" @click='exportData'&g ...
- jQuery-easyui实现关闭全部tabs
有时候当我们打开很多tabs选项卡时,要关闭它只能一个一个的进行关闭,显然太麻烦,这时可以在选项卡的最右边添加一个按钮 实现关闭全部. function openTab(text, url, icon ...