- 浏览: 3293676 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (567)
- Web前端-html/表单 (19)
- Web前端-CSS (24)
- Web前端-CSS框架 (4)
- Web前端-JS语言核心 (50)
- Web前端-JS客户端 (26)
- nodejs生态+grunt (10)
- seajs和requirejs (9)
- backbone等框架 (7)
- 模板基础 (7)
- Web前端-deps(不改动) (6)
- Web前端-component (10)
- Web前端-jquery-plugin (13)
- 浏览器兼容性 (6)
- Web前端-使用jQuery (25)
- Web前端-使用jqueryui (6)
- Web前端-性能优化 (3)
- Web协议-HTTP (6)
- ExtJS (13)
- PHP (22)
- PHP面向对象 (4)
- PHP扩展-SOAP (6)
- PHP扩展-curl (4)
- PHP与HTML(导出) (5)
- PHP扩展-综合 (7)
- mysql基础应用 (18)
- 技术心情 (18)
- 算法和面试题 (17)
- 工具(开发)使用 (36)
- memcached原理 (2)
- session和cookie (4)
- UML (2)
- Web前端_FusionCharts (5)
- Web前端_Flex (4)
- Web前端_JSP (3)
- JavaSE (10)
- JavaEE (4)
- tomcat (2)
- Servlet开发 (3)
- Spring开发 (1)
- REST相关 (2)
- 大访问量、高并发 (2)
- 网络编程 (1)
- YII (21)
- linux命令和内核 (12)
- yii与数据库 (10)
- yii与表单 (12)
- yii view层 (1)
- perl (7)
- yii扩展 (7)
- shell (4)
- photoshop (7)
- 视觉设计 (2)
- 我关注的名人在路上 (4)
- 1-自学能力 (1)
- 2-人际沟通能力 (3)
- 3-职业规划能力 (7)
- 4-项目管理能力 (2)
- python (3)
- django (4)
- Mysql高级应用 (6)
- prototype.js (4)
- Web系统安全 (1)
- Web前端-mobile (2)
- egret (6)
- jQuery源码分析 (5)
- fis (4)
最新评论
-
yzq21056563:
感谢作者分享~请教下,http://www.lisa33xia ...
CSS基础:text-overflow:ellipsis溢出文本 -
u012206458:
$.ajax的error,complete,success方法 -
DEMONU:
谢谢,虽然不能给你赞助,但是要给你顶
mysql中key 、primary key 、unique key 与index区别 -
njupt_tolmes:
阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿滕庆亚 ...
CSS基础:text-overflow:ellipsis溢出文本 -
zenmshuo:
用过SpreadJS,也包含数据可视化的图表
推荐几个web中常用js图表插件
作者:zccst
参考文章:
http://www.css119.com/archives/1629
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件:touchstart、touchmove和touchend。
一开始触摸事件touchstart、touchmove和touchend是iOs版Safari浏览器为了向开发人员传达一些信息新添加的事件。因为iOs设备既没有鼠标也没有键盘,所以在为移动Safari浏览器开发交互性网页的时候,PC端的鼠标和键盘事件是不够用的。
在iPhone 3Gs发布的时候,其自带的移动Safari浏览器就提供了一些与触摸(touch)操作相关的新事件。随后,Android上的浏览器也实现了相同的事件。触摸事件(touch)会在用户手指放在屏幕上面的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候出发。下面具体说明:
touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。
touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。
touchend事件:当手指从屏幕上离开的时候触发。
touchcancel事件:当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间,文档中并没有具体说明,咱们只能去猜测了。
上面的这些事件都会冒泡,也都可以取消。虽然这些触摸事件没有在DOM规范中定义,但是它们却是以兼容DOM的方式实现的。所以,每个触摸事件的event对象都提供了在鼠标实践中常见的属性:bubbles(起泡事件的类型)、cancelable(是否用 preventDefault() 方法可以取消与事件关联的默认动作)、clientX(返回当事件被触发时,鼠标指针的水平坐标)、clientY(返回当事件触发时,鼠标指针的垂直坐标)、screenX(当某个事件被触发时,鼠标指针的水平坐标)和screenY(返回当某个事件被触发时,鼠标指针的垂直坐标)。除了常见的DOM属性,触摸事件还包含下面三个用于跟踪触摸的属性。
touches:表示当前跟踪的触摸操作的touch对象的数组。
targetTouches:特定于事件目标的Touch对象的数组。
changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。
每个Touch对象包含的属性如下。
clientX:触摸目标在视口中的x坐标。
clientY:触摸目标在视口中的y坐标。
identifier:标识触摸的唯一ID。
pageX:触摸目标在页面中的x坐标。
pageY:触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。
target:触目的DOM节点目标。
上面的属性光这么看,果然非常繁琐,每个属性说的都是那么的细致,只有真刀实枪的来点小例子才能更加明白其中的奥妙。所以小例子如下。
HTML代码
<div id="inp"></div>
上面的小例子。当touchstart事件触发的时候,会将触摸的位置更新到div标签中。当touchmove事件触发的时候,会默认行为的滚动(触摸移动的默认行为是滚动页面),然后触摸操作的变化信息更新到div标签中。而touchend事件会输出有关触摸操作的最终信息。注意,在touchend事件触发的时候,touches集合中就没有任何Touch对象了,因为不存在活动的触摸操作。
这些事件会在文档的所有元素上面触发,因而可以分别操作页面的不同部分。在触摸屏幕上的元素,这些事件(包括鼠标事件)发生的顺序如下:
(1)touchstart
(2)mouseover
(3)mousemove(一次)
(4)mousedown
(5)mouseup
(6)click
(7)touchend
介绍了这么多,这些触摸事件的兼容情况怎么样呢?支持触摸事件(touchstart、touchmove和touchend)的浏览器有:iOs版Safari、Android版WebKit、bada版Dolfin、OS6+中的BlackBerry WebKit、Opera Mobile 10.1+和LG专有OS中的Phantom浏览器。目前只有iOs版Safari支持多点触摸。PC版Firefox 6+ 和Chrome也支持触摸事件。
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
参考文章:
http://www.css119.com/archives/1629
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件:touchstart、touchmove和touchend。
一开始触摸事件touchstart、touchmove和touchend是iOs版Safari浏览器为了向开发人员传达一些信息新添加的事件。因为iOs设备既没有鼠标也没有键盘,所以在为移动Safari浏览器开发交互性网页的时候,PC端的鼠标和键盘事件是不够用的。
在iPhone 3Gs发布的时候,其自带的移动Safari浏览器就提供了一些与触摸(touch)操作相关的新事件。随后,Android上的浏览器也实现了相同的事件。触摸事件(touch)会在用户手指放在屏幕上面的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候出发。下面具体说明:
touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。
touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。
touchend事件:当手指从屏幕上离开的时候触发。
touchcancel事件:当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间,文档中并没有具体说明,咱们只能去猜测了。
上面的这些事件都会冒泡,也都可以取消。虽然这些触摸事件没有在DOM规范中定义,但是它们却是以兼容DOM的方式实现的。所以,每个触摸事件的event对象都提供了在鼠标实践中常见的属性:bubbles(起泡事件的类型)、cancelable(是否用 preventDefault() 方法可以取消与事件关联的默认动作)、clientX(返回当事件被触发时,鼠标指针的水平坐标)、clientY(返回当事件触发时,鼠标指针的垂直坐标)、screenX(当某个事件被触发时,鼠标指针的水平坐标)和screenY(返回当某个事件被触发时,鼠标指针的垂直坐标)。除了常见的DOM属性,触摸事件还包含下面三个用于跟踪触摸的属性。
touches:表示当前跟踪的触摸操作的touch对象的数组。
targetTouches:特定于事件目标的Touch对象的数组。
changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。
每个Touch对象包含的属性如下。
clientX:触摸目标在视口中的x坐标。
clientY:触摸目标在视口中的y坐标。
identifier:标识触摸的唯一ID。
pageX:触摸目标在页面中的x坐标。
pageY:触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。
target:触目的DOM节点目标。
上面的属性光这么看,果然非常繁琐,每个属性说的都是那么的细致,只有真刀实枪的来点小例子才能更加明白其中的奥妙。所以小例子如下。
function load (){ document.addEventListener('touchstart',touch, false); document.addEventListener('touchmove',touch, false); document.addEventListener('touchend',touch, false); function touch (event){ var event = event || window.event; var oInp = document.getElementById("inp"); switch(event.type){ case "touchstart": oInp.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")"; break; case "touchend": oInp.innerHTML = "<br/>Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")"; break; case "touchmove": event.preventDefault(); oInp.innerHTML = "<br/>Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")"; break; } } } window.addEventListener('load',load, false);
HTML代码
<div id="inp"></div>
上面的小例子。当touchstart事件触发的时候,会将触摸的位置更新到div标签中。当touchmove事件触发的时候,会默认行为的滚动(触摸移动的默认行为是滚动页面),然后触摸操作的变化信息更新到div标签中。而touchend事件会输出有关触摸操作的最终信息。注意,在touchend事件触发的时候,touches集合中就没有任何Touch对象了,因为不存在活动的触摸操作。
这些事件会在文档的所有元素上面触发,因而可以分别操作页面的不同部分。在触摸屏幕上的元素,这些事件(包括鼠标事件)发生的顺序如下:
(1)touchstart
(2)mouseover
(3)mousemove(一次)
(4)mousedown
(5)mouseup
(6)click
(7)touchend
介绍了这么多,这些触摸事件的兼容情况怎么样呢?支持触摸事件(touchstart、touchmove和touchend)的浏览器有:iOs版Safari、Android版WebKit、bada版Dolfin、OS6+中的BlackBerry WebKit、Opera Mobile 10.1+和LG专有OS中的Phantom浏览器。目前只有iOs版Safari支持多点触摸。PC版Firefox 6+ 和Chrome也支持触摸事件。
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
发表评论
-
[html5]localStorage代替Cookie? HTML5本地存储安全性
2015-03-20 17:53 26287zccst转载 HTML5本地存储的前身就是Cookie,H ... -
[移动端]专用的meta
2015-03-04 15:31 8227作者:zccst <meta name=" ... -
meta name=viewport含义
2015-02-12 16:29 3930作者:zccst viewport中文 ... -
doctype和compatModel相关
2015-01-04 19:30 680作者:zccst 一、doctype 1,严格模式与混杂模 ... -
【转义字符】HTML 字符实体 < >: &等
2014-11-18 18:56 22859作者:zccst 2014-12-10 又 ... -
挖掘input type=file的新知识
2014-11-13 18:23 3056作者:zccst 文件上传,这个问题始终一知半解,今天又近真 ... -
div+css布局总结
2014-09-04 10:48 1402作者:zccst 3,position布局 #wrap ... -
文件上传的两种情况及mock时对应处理办法
2014-09-02 19:46 1672作者:zccst 1,给文件一个独立的url,要求文件上传至 ... -
attr与prop的区别
2014-07-09 18:20 914作者:zccst jQuery在1.6.1 ... -
HTML <label> 标签的 for 属性
2014-07-04 17:14 1993作者:zccst for 属性规定 label 与哪个表单元 ... -
设置frameset的高度
2014-01-26 13:22 2677zccst转载 原文: 这是使用frameset做的,在宽 ... -
天气接口API
2012-02-02 17:32 1310把下面代码粘贴到自己的页面里,就能显示天气了。 <if ... -
form表单深入理解
2011-11-23 20:12 2133作者:zccst form表单 一、表单基础 作用:用来向服 ... -
表单之input file的使用特点及在php.ini中的相关参数设置
2011-11-23 20:08 23061,控件 <input type= "fi ... -
文件编码
2011-07-04 18:35 1181今天第一次留意文件的编码格式。 改变方式:另存为时,可选择 ... -
html5新知识点
2011-05-12 22:53 1834作者:zccst 新技术 http://timelineap ... -
HTML 和 XHTML 区别
2011-05-12 22:24 1043这篇文章主要阐述 HTML 和 XHTML 的区别。简单来说, ... -
表单与ajax一并使用
2011-04-22 13:35 1160表单与ajax一并使用 一、表单需要注意的地方。 form ...
相关推荐
今天为大家介绍的事件主要是触摸事件:touchstart、touchmove和touchend。 一开始触摸事件touchstart、touchmove和touchend是iOS版Safari浏览器为了向开发人员传达一些信息新添加的事件。因为iOs设备既没有鼠标也...
本文主要介绍HTML5实战与剖析之触摸事件,介绍的比较详细,需要的朋友可以参考下。
微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend。 这三个事件最重要的属性是pageX和pageY,表示X,Y坐标。 touchstart在触摸开始时触发事件; touchend在触摸结束时触发事件; ...
今天为大家介绍的事件主要是触摸事件:touchstart、touchmove和touchend。 一开始触摸事件touchstart、touchmove和touchend是iOs版Safari浏览器为了向开发人员传达一些信息新添加的事件。因为iOs设备既没有鼠标也...
由于微信小程序只能够支持 tap,longtap,touchstart,touchmove,touchcancel,touchend时间,对于比较复杂的事件只能自己实现 因此自己对 alloyFinger库进行了改造,开发了时候微信小程序手势事件库WxTouchEvent,使用 ...
canvas 做游戏还是比较有趣的,另外还可以把这个游戏加以扩展,改成手机版,画布尺寸通过获取屏幕宽高确定,键盘部分改成触摸事件(touchstart、touchmove、touchend),怪兽出现方式也可以改成从屏幕顶端随机下落,...
vue2.0 touch 事件 把原生的 touchstart,touchmove,touchend,touchcancel添加到Vue组件中
手机页面滑动提示,touchstart 、touchmove、touchend 的运用,简单展示
touchmove这个事件比较奇怪,按道理在触摸到过程中不断激发这个事件才对,但是在我的 Android 1.5 中,在 touchstart 激发后激发一次,然后剩余的都和 touchend 差不多同时激发。 这三个事件都都有一个 timeStamp ...
微信小程序列表页的左滑动删除 1,首先页面每个item分为上下两层,上面一层放置正常...3,我们通过微信小程序api提供的touch对象和3个有关手指触摸的函数(touchstart,touchmove,touchend)来实现item随手指移动。
js触屏事件,用于支持手机上的touchstart,touchmove,touchend
基于jQuery的轻量级touch事件库 demo: photo-slide 支持移动端和pc端 touchstart touchmove touchend
微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend。 这三个事件最重要的属性是pageX和pageY,表示X,Y坐标。 touchstart在触摸开始时触发事件; touchend在触摸结束时触发事件;...
1.触屏事件 1.touchstart. touchmove. touchend 可以实现拖动元素 2.但是拖动元素需要当前手指的坐标值我们可以使用target
根据传递的节点对象,通过touchstart、touchmove、touchend时间回调自定义方法,返回相对于屏幕的touch坐标或相对于节点的touch坐标到回调方法
touchstart, touchmove, touchend, longpress 而如果地图上监听了 click 事件,在移动端是不会执行这个事件里面的代码的。 我之前做一个需求时,给地图监听了 touchend 事件,不曾想当我拖动地图时,也执行了 ...
touch事件和click事件发生先后顺序: touchstart,touchmove,touchend,click 补充知识:touchstart与click同时触发 产生冲突的原因 我们可以给某个元素同时绑定 touchstart 和 click 事件,但这将会导致本篇文章...
于是我自己写了一个在移动端的拖拽demo,主要用到的事件是触摸事件(touchstart,touchmove和touchend)。 这个demo实现的功能是:可以拖拽的元素(在这里是图片)位于列表中,这些元素可以被拖到指定区域,到达指定...
前言 之前写过一篇微信小程序...此次组件需要处理touchstart、touchmove和touchend三个touch事件 touchstart事件时需要先禁用掉transition动画,同时记录下触摸点的pageX和pageY的值,以及此时滑动的起始点,即删除按钮
touchstart:手指开始触屏 touchmove:手指移动 touchend:手指触屏结束 这个事件在手机上跟在pc端都生效 scroll事件 addeventlistener(name,callback,optional,useCapture) useCapture:事件是否用捕获事件,从...