文档章节

手机站建设HTML5触摸屏touch事件使用介绍

hosser
 hosser
发布于 2015/03/18 00:57
字数 476
阅读 4073
收藏 12

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

手机站建设HTML5触摸屏touch事件使用介绍技术

maybe yes 发表于2015-01-05 14:42

原文链接 : http://blog.lmlphp.com/archives/56  来自 : LMLPHP后院

市面上手机种类繁多,在触屏手机上运行的网页跟传统PC网页相比还是有很大差别的。由于设备的不同浏览器的事件的设计也不同。传统PC站的 click 和 onmouseover 等事件在一般触屏的手机上也可以使用,但是效果不够好。PC上还没有哪个事件是可以与触屏手机的触摸事件对应的,为了更好的用户体验,移动站点的建设也需要对不同的事件进行处理。

介绍几种兼容比较好的触摸事件,大部分触屏设备都支持的。

touchstart:触摸开始的时候触发

touchmove:触摸时手指在屏幕上滑动的时候触发

touchend:触摸结束的时候触发

touchcancel:系统取消touch事件的时候触发

事件绑定,代码示例:

<script>
var obj = document.getElementById('id');
obj.addEventListener('touchstart', touchStart, false);
obj.addEventListener('touchmove', touchMove, false);
obj.addEventListener('touchend', touchEnd, false);
var touchMove = function(event) {
	if (event.targetTouches.length == 1) {
		// prevent default 
		event.preventDefault();
		var touch = event.targetTouches[0];
		// do something
	}

};
</script>

触摸事件属性介绍

touches:当前位于屏幕上的所有触点的列表,IOS支持的比较好,目前Android系统的浏览器一般对多点触控不敏感。

targetTouches:位于当前触点之下的DOM节点。

changedTouches:事件触发时的触点。

每个触摸点由包含了如下触摸信息

identifier:唯一标识触摸会话。

target:事件目标DOM元素。

pageX/pageX/clientX/clientY/screenX/screenY:页面/窗口/屏幕的位置。 

radiusX/radiusY/rotationAngle:画出大约相当于手指形状的椭圆形,分别为椭圆形的两个半径和旋转角度。

阅(50)评(0)查看评论


本文转载自:http://blog.lmlphp.com/archives/56

hosser

hosser

粉丝 192
博文 78
码字总数 4614
作品 3
徐汇
私信 提问
面向移动设备的HTML5开发框架梳理

很久以前整理了篇将手机网站做成手机应用的JS框架。时隔一年多,很多新的技术已经出现,下面再来总结下还有哪些框架是适合面向手机设备的开发的。 1、jQuery Mobile jQuery Mobile 是 jQuery...

凯文加内特
2015/01/26
1K
0
HTML5来了,7个混合式移动开发框架

Posted 周二, 12/30/2014 - 12:18 by admin 在这个时间开始学习移动开发真是最好不过了,每个人应该都有一些移动应用的创意,而且你并不需要任何的原生应用编程经验,你只需要一些HTML的相关...

程序袁_绪龙
2015/01/29
1K
0
红杉资本投资 HTML5应用开发商Sencha

编者:一周前,Ext JS、jQTouch和Raphael项目合并为Sencha 看来是在为此次投资做好准备。 据国外媒体报道,HTML5应用开发商Sencha周三宣布,该公司刚刚获得了1400万美元融资。 本次融资由红杉...

红薯
2010/06/24
835
1
HTML5来了,7个混合式移动开发框架

在这个时间开始学习移动开发真是最好不过了,每个人应该都有一些移动应用的创意,而且你并不需要任何的原生应用编程经验,你只需要一些HTML的相关知识,懂一些CSS和JavaScript就够了。如果你...

数通畅联
2015/01/04
482
0
10 款最好用的移动 web 开发工具

对于新款手机来说,好的开发工具变得越来越重要。手机(尤其是iPhone和Android)中的小工具(小软件)非常的重要,而要开发这些小软件就要选择合适的开发工具。 另外,HTML5提供了很多易于移...

虫虫
2012/04/06
10K
6

没有更多内容

加载失败,请刷新页面

加载更多

ArrayList 源码分析

一、概述 本文基于 JDK8 ArrayList 底层通过动态数组的数据结构实现 内存需要连续的空间保证 添加操作涉及到数组的动态扩容 添加,删除都涉及到位置移动操作 随机查找效率快(下标查找) Ar...

hncboy
今天
4
0
采购单品汇总_华南.xlsx

import pandas as pdimport matplotlib.pyplot as pltimport matplotlib as mp1mp1.rcParams["font.family"] = "STFangsong"# 加载《销售》表数据df1 = pd.read_excel(r"C:\Us......

龙玉滕
今天
5
0
OSChina 周五乱弹 —— 一次四千 要4次还能多给一千

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @这次装个文艺青年吧 :#今日歌曲推荐# 分享金志文的单曲《远走高飞》: 版权又回来了现在听歌得好几个软件 《远走高飞》- 金志文 手机党少年们...

小小编辑
今天
10
0
Spring Cloud Alibaba 实战(十) - Spring Cloud GateWay

> 本文主要内容是:为什么要使用网关,整合Gateway,Gateway核心学习:Route,Predicate,Filter,最后使用Gateway聚合微服务请求 先总结至此的架构 1 网关的价值 不使用网关行嘛? 各个请求直接打在...

JavaEdge
今天
4
0
【CKB.DEV 茶话会】第二期:聊聊 CKB 钱包和 Nervos DAO 全流程

CKB.DEV 茶话会第二期:聊聊 CKB 钱包和 Nervos DAO 全流程 为了鼓励更多优秀的开发者和研究人员参与到 CKB 的开发和生态建设中去,我们希望组织一系列 CKB Developer Seminar(CKB.DEV 茶话...

NervosCommunity
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部