评论-4131&
现在一直在做移动端的开发，这次将单页应用的网页内嵌入了app，于是老大反映了一个问题：app应用点击响应慢！我开始不以为然，于是拿着网页版的试了试，好像确实有一定延迟，于是开始了研究，最后选择了touch取代鼠标事件
但是，touch事件取代mouse事件，还是有一定问题的，据说网上问题很多，因为两者之间还是有一定差异而且如果完全使用touch事件，对自动化测试的同事来说，他们的系统根本不支持touch事件，再者我们平时网页开发也不方便所以，了解鼠标事件与touch事件的区别，探讨鼠标事件与touch事件的兼容也是有必要的，于是我们开始今天的学习吧PS：这里使用zepto框架，懒得自己搞了......
首先，我们来看看鼠标事件相关吧：
1 var startT
2 var log = function (msg) {
console.log(new Date().getTime() - startTime);
console.log(msg);
6 var mouseDown = function () {
startTime = new Date().getTime();
log('mouseDown');
10 var mouseClick = function () {
log('mouseClick');
13 var mouseUp = function () {
log('mouseUp');
17 document.addEventListener('mousedown', mouseDown);
18 document.addEventListener('click', mouseClick);
19 document.addEventListener('mouseup', mouseUp);
从这里看到了，鼠标顺序是有mousedown -& click -& mouseup 的顺序，其时间差也出来了
然后我们看看touch事件
touch包含三个事件，touchstart、touchmove、touchend，并没有click事件，所以click事件需要自己模拟，这个我们后面来看看
1 var startT
2 var log = function (msg) {
console.log(new Date().getTime() - startTime);
console.log(msg);
6 var touchStart = function () {
startTime = new Date().getTime();
log('touchStart');
11 var touchEnd = function () {
log('touchEnd');
15 document.addEventListener('touchstart', touchStart);
16 document.addEventListener('touchend', touchEnd);
在chrome开启touch事件的情况下，可以看到这个结果
现在我们在手机上同时触发两者事件看看区别，这里代码做一定修改
1 &!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
2 &html xmlns="http://www.w3.org/1999/xhtml"&
&title&&/title&
&script id="others_zepto_10rc1" type="text/javascript" class="library" src="/js/sandbox/other/zepto.min.js"&&/script&
&div id="d" style="width: 100 height: 100 border: 1"&
10 &/body&
11 &script type="text/javascript"&
var startT
var log = function (msg) {
var div = $('&div&&/div&');
div.html((new Date().getTime()) + ': ' + (new Date().getTime() - startTime) + ': ' + msg)
$('body').append(div);
var touchStart = function () {
startTime = new Date().getTime();
log('touchStart');
var touchEnd = function () {
log('touchEnd');
var mouseDown = function () {
log('mouseDown');
var mouseClick = function () {
log('mouseClick');
var mouseUp = function () {
log('mouseUp');
var d = $('#d');
d.bind('mousedown', mouseDown);
d.bind('click', mouseClick);
d.bind('mouseup', mouseUp);
d.bind('touchstart', touchStart);
d.bind('touchend', touchEnd);
43 &/script&
44 &/html&
此处手机与电脑有非常大的区别！！！
不要同时给document绑定鼠标与touch事件
document.addEventListener('mousedown', mouseDown);
document.addEventListener('click', mouseClick);
document.addEventListener('mouseup', mouseUp);
document.addEventListener('touchstart', touchStart);
document.addEventListener('touchend', touchEnd);
这个样子，在手机上不会触发click事件，click事件要绑定到具体元素
PS：此处的原因我就不去研究了，如果您知道为什么，请留言
手机上mousedown本来响应就慢
经过测试，电脑上touch与click事件的差距不大，但是手机上，当我们手触碰屏幕时，要过300ms左右才会触发mousedown事件
所以click事件在手机上响应就是慢一拍
可以看到，在手机上使用click事件其实对用户体验并不好，所以我们可能会逐步使用touch事件
现在，我们来看看鼠标与touch事件的参数差异
1 var startT
2 var log = function (msg, e) {
console.log(e);
var div = $('&div&&/div&');
div.html((new Date().getTime()) + ': ' + (new Date().getTime() - startTime) + ': ' + msg)
$('body').append(div);
9 var touchStart = function (e) {
startTime = new Date().getTime();
log('touchStart', e);
13 var touchEnd = function (e) {
log('touchEnd', e);
17 var mouseDown = function (e) {
log('mouseDown', e);
20 var mouseClick = function (e) {
log('mouseClick', e);
23 var mouseUp = function (e) {
log('mouseUp', e);
27 var d = $('#d');
28 d.bind('mousedown', mouseDown);
29 d.bind('click', mouseClick);
30 d.bind('mouseup', mouseUp);
31 d.bind('touchstart', touchStart);
32 d.bind('touchend', touchEnd);
事件参数（touchstart/mouseup）
我们来看几个关键的地方：
changedTouches/touches/targetTouches
touches：为屏幕上所有手指的信息
PS：因为手机屏幕支持多点触屏，所以这里的参数就与手机有所不同
targetTouches：手指在目标区域的手指信息
changedTouches：最近一次触发该事件的手指信息
比如两个手指同时触发事件，2个手指都在区域内，则容量为2，如果是先后离开的的话，就会先触发一次再触发一次，这里的length就是1，只统计最新的
PS：一般changedTouches的length都是1
touchend时，touches与targetTouches信息会被删除，changedTouches保存的最后一次的信息，最好用于计算手指信息
这里要使用哪个数据各位自己看着办吧，我也不是十分清晰（我这里还是使用changedTouches吧）
参数信息(changedTouches[0])
几个重要通用点：
① clientX：在显示区的坐标
② pageX：鼠标在页面上的位置
③ screenX：鼠标在显示屏上的坐标（我是双屏所以x很大）
④ target：当前元素
几个重要不同点：
① layerX：这个是相对距离，这个不同，所以不要用这个东西了
这个有必要说明下，比如我们改下代码：
1 &!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
2 &html xmlns="http://www.w3.org/1999/xhtml"&
&title&&/title&
&script id="others_zepto_10rc1" type="text/javascript" class="library" src="/js/sandbox/other/zepto.min.js"&&/script&
9 &div style=" position: width: 500 height: 300 border: 1"&
10 &div id="d" style=" position: top: 50 left: 50 width: 100 height: 100 border: 1" &&/div&
12 &/body&
14 &script type="text/javascript"&
15 var startT
16 var log = function (msg, e) {
console.log(e);
var div = $('&div&&/div&');
div.html((new Date().getTime()) + ': ' + (new Date().getTime() - startTime) + ': ' + msg)
$('body').append(div);
23 var touchStart = function (e) {
startTime = new Date().getTime();
log('touchStart', e);
27 var touchEnd = function (e) {
log('touchEnd', e);
31 var mouseDown = function (e) {
log('mouseDown', e);
34 var mouseClick = function (e) {
log('mouseClick', e);
37 var mouseUp = function (e) {
log('mouseUp', e);
41 var d = $('#d');
42 d.bind('mousedown', mouseDown);
43 d.bind('click', mouseClick);
44 d.bind('mouseup', mouseUp);
45 d.bind('touchstart', touchStart);
46 d.bind('touchend', touchEnd);
49 &/html&
各位自己运行看看差异吧
简单扩展touch事件
touch没有click事件，于是有zepto搞了个tap事件，我们这里先来简单模拟一下，再看源码怎么干的
1 var mouseData = {
9 var log = function (msg) {
console.log(msg);
12 var touchStart = function (e) {
var pos = e.changedTouches[0];
mouseData.sTime = new Date().getTime();
mouseData.sX = pos.pageX;
mouseData.sY = pos.pageY;
18 var touchMove = function (e) {
var pos = e.changedTouches[0];
mouseData.eTime = new Date().getTime();
mouseData.eX = pos.pageX;
mouseData.eY = pos.pageY;
e.preventDefault();
return false;
26 var touchEnd = function (e) {
var pos = e.changedTouches[0];
mouseData.eTime = new Date().getTime();
mouseData.eX = pos.pageX;
mouseData.eY = pos.pageY;
var data = onTouchEnd();
log(data);
var d = $('body');
d.append($('&div&间隔：' + data.timeLag + ', 方向：' + data.dir + '&/div&'));
36 var onTouchEnd = function () {
//时间间隔
var timeLag = mouseData.eTime - mouseData.sT
//移动状态，默认乱移动
var dir = 'move';
if (mouseData.sX == mouseData.eX) {
if (mouseData.eY - mouseData.sY & 0) dir = 'down';
if (mouseData.eY - mouseData.sY & 0) dir = 'up';
if (mouseData.eY - mouseData.sY == 0) dir = 'tap';
if (mouseData.sY == mouseData.eY) {
if (mouseData.eX - mouseData.sX & 0) dir = 'right';
if (mouseData.eX - mouseData.sX & 0) dir = 'left';
if (mouseData.eX - mouseData.sX == 0) dir = 'tap';
timeLag: timeLag,
57 var touchEvents = function (el, func) {
el = el ||
func = func || function () { };
el.addEventListener('touchstart', touchStart);
el.addEventListener('touchmove', touchMove);
el.addEventListener('touchend', touchEnd);
64 var d = $('body');
65 touchEvents(d[0]);
这里就可以看到一次touch事件是tap还是up等属性，当然很多时候我们需要设置x方向或者y方向不可拖动，这样就更好呈现
时间间隔长短可以让我们判断自己的拖动是长拖动还是短拖动，长拖动也许用户希望动画慢点，短拖动也许动画就快了
touch事件代码汇总
1 var log = function (msg) {
console.log(msg);
4 var d = $('body');
6 var touchEvents = function (el, type, func) {
this.long = 400; //用于设置长点击阀值
this.el = el ||
this.func = func || function () { };
this.type = type || 'tap';
this.mouseData = {
this.addEvent();
22 touchEvents.prototype = {
constructor: touchEvents,
addEvent: function () {
var scope = this;
this.startFn = function (e) {
scope.touchStart.call(scope, e);
this.moveFn = function (e) {
scope.touchMove.call(scope, e);
this.endFn = function (e) {
scope.touchEnd.call(scope, e);
this.el.addEventListener('touchstart', this.startFn);
//此处可以换成这样
document.addEventListener('touchmove', this.touchMove);
this.el.addEventListener('touchmove', this.moveFn);
this.el.addEventListener('touchend', this.endFn);
removeEvent: function () {
this.el.removeEventListener('touchstart', this.touchStart);
this.el.removeEventListener('touchmove', this.touchMove);
this.el.removeEventListener('touchend', this.touchEnd);
touchStart: function (e) {
var pos = e.changedTouches[0];
this.mouseData.sTime = new Date().getTime();
this.mouseData.sX = pos.pageX;
this.mouseData.sY = pos.pageY;
touchMove: function (e) {
e.preventDefault();
return false;
touchEnd: function (e) {
var pos = e.changedTouches[0];
this.mouseData.eTime = new Date().getTime();
this.mouseData.eX = pos.pageX;
this.mouseData.eY = pos.pageY;
this.onTouchEnd();
onTouchEnd: function () {
if (this.type == this._getDir()) {
_getDir: function () {
//时间间隔，间隔小于100都认为是快速，大于400的认为是慢速
var timeLag = this.mouseData.eTime - this.mouseData.sT
var dir = 'swipe';
if (timeLag & this.long) dir = 'longSwipe';
if (this.mouseData.sX == this.mouseData.eX && this.mouseData.sY == this.mouseData.eY) {
dir = 'tap';
if (timeLag & this.long) dir = 'longTap';
if (Math.abs(this.mouseData.eY - this.mouseData.sY) & Math.abs(this.mouseData.eX - this.mouseData.sX)) {
dir = this._getUDDir(dir);
dir = 'swipe';
dir = this._getLRDir(dir);
d.append($('&div&间隔：' + timeLag + ', 方向：' + dir + '&/div&'));
//单独用于计算上下的
_getUDDir: function (dir) {
if (this.mouseData.eY - this.mouseData.sY & 0) dir += 'Down';
if (this.mouseData.eY - this.mouseData.sY & 0) dir += 'Up';
//计算左右
_getLRDir: function (dir) {
if (this.mouseData.eX - this.mouseData.sX & 0) dir += 'Right';
if (this.mouseData.eX - this.mouseData.sX & 0) dir += 'Left';
102 new touchEvents(d[0], 'swipe', function () {
d.append($('&div&间隔：' + data.timeLag + ', 方向：' + data.dir + '&/div&'));
测试时请使用chrome，并且开启touch事件
完整可绑定事件代码
1 &!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
2 &html xmlns="http://www.w3.org/1999/xhtml"&
&title&&/title&
&meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"&
&script id="others_zepto_10rc1" type="text/javascript" class="library" src="/js/sandbox/other/zepto.min.js"&&/script&
&div id="d" style="position: top: 50 left: 50 width: 100 height: 100
border: 1"&滑动我
12 &/body&
13 &script type="text/javascript"&
14 var log = function (msg) {
console.log(msg);
17 var d = $('body');
19 var touchEvents = function (el, type, func) {
this.long = 400; //用于设置长点击阀值
this.el = el ||
this.func = func || function () { };
this.type = type || 'tap';
this.mouseData = {
this.addEvent();
35 touchEvents.prototype = {
constructor: touchEvents,
addEvent: function () {
var scope = this;
this.startFn = function (e) {
scope.touchStart.call(scope, e);
this.moveFn = function (e) {
scope.touchMove.call(scope, e);
this.endFn = function (e) {
scope.touchEnd.call(scope, e);
this.el.addEventListener('touchstart', this.startFn);
//此处可以换成这样
document.addEventListener('touchmove', this.touchMove);
this.el.addEventListener('touchmove', this.moveFn);
this.el.addEventListener('touchend', this.endFn);
removeEvent: function () {
this.el.removeEventListener('touchstart', this.touchStart);
this.el.removeEventListener('touchmove', this.touchMove);
this.el.removeEventListener('touchend', this.touchEnd);
touchStart: function (e) {
var pos = e.changedTouches[0];
this.mouseData.sTime = new Date().getTime();
this.mouseData.sX = pos.pageX;
this.mouseData.sY = pos.pageY;
touchMove: function (e) {
e.preventDefault();
return false;
touchEnd: function (e) {
var pos = e.changedTouches[0];
this.mouseData.eTime = new Date().getTime();
this.mouseData.eX = pos.pageX;
this.mouseData.eY = pos.pageY;
this.onTouchEnd(e);
onTouchEnd: function (e) {
if (this.type == this._getDir()) {
this.func(e, this);
_getDir: function () {
//时间间隔，间隔小于100都认为是快速，大于400的认为是慢速
var timeLag = this.mouseData.eTime - this.mouseData.sT
var dir = 'swipe';
if (timeLag & this.long) dir = 'longSwipe';
if (this.mouseData.sX == this.mouseData.eX && this.mouseData.sY == this.mouseData.eY) {
dir = 'tap';
if (timeLag & this.long) dir = 'longTap';
if (Math.abs(this.mouseData.eY - this.mouseData.sY) & Math.abs(this.mouseData.eX - this.mouseData.sX)) {
dir = this._getUDDir(dir);
dir = this._getLRDir(dir);
d.append($('&div&间隔：' + timeLag + ', 方向：' + dir + '&/div&'));
//单独用于计算上下的
_getUDDir: function (dir) {
if (this.mouseData.eY - this.mouseData.sY & 0) dir += 'Down';
if (this.mouseData.eY - this.mouseData.sY & 0) dir += 'Up';
//计算左右
_getLRDir: function (dir) {
if (this.mouseData.eX - this.mouseData.sX & 0) dir += 'Right';
if (this.mouseData.eX - this.mouseData.sX & 0) dir += 'Left';
114 new touchEvents(d[0], 'tap', function (e) {
log(arguments);
118 &/script&
119 &/html&
这个代码基本可用了，但是使用上不是很方便，我们这里就不关注了，下面我们来看看zepto的代码和兼容问题
zepto的touch与兼容
先上zepto源码，一看就知道我写的有多不行啦！
1 (function ($) {
var touch = {},
touchTimeout, tapTimeout, swipeTimeout,
longTapDelay = 750, longTapTimeout
function parentIfText(node) {
return 'tagName' in node ? node : node.parentNode
function swipeDirection(x1, x2, y1, y2) {
var xDelta = Math.abs(x1 - x2), yDelta = Math.abs(y1 - y2)
return xDelta &= yDelta ? (x1 - x2 & 0 ? 'Left' : 'Right') : (y1 - y2 & 0 ? 'Up' : 'Down')
function longTap() {
longTapTimeout = null
if (touch.last) {
touch.el.trigger('longTap')
touch = {}
function cancelLongTap() {
if (longTapTimeout) clearTimeout(longTapTimeout)
longTapTimeout = null
function cancelAll() {
if (touchTimeout) clearTimeout(touchTimeout)
if (tapTimeout) clearTimeout(tapTimeout)
if (swipeTimeout) clearTimeout(swipeTimeout)
if (longTapTimeout) clearTimeout(longTapTimeout)
touchTimeout = tapTimeout = swipeTimeout = longTapTimeout = null
touch = {}
$(document).ready(function () {
var now, delta
$(document.body)
.bind('touchstart', function (e) {
now = Date.now()
delta = now - (touch.last || now)
touch.el = $(parentIfText(e.touches[0].target))
touchTimeout && clearTimeout(touchTimeout)
touch.x1 = e.touches[0].pageX
touch.y1 = e.touches[0].pageY
if (delta & 0 && delta &= 250) touch.isDoubleTap = true
touch.last = now
longTapTimeout = setTimeout(longTap, longTapDelay)
.bind('touchmove', function (e) {
cancelLongTap()
touch.x2 = e.touches[0].pageX
touch.y2 = e.touches[0].pageY
if (Math.abs(touch.x1 - touch.x2) & 10)
e.preventDefault()
.bind('touchend', function (e) {
cancelLongTap()
if ((touch.x2 && Math.abs(touch.x1 - touch.x2) & 30) ||
(touch.y2 && Math.abs(touch.y1 - touch.y2) & 30))
swipeTimeout = setTimeout(function () {
touch.el.trigger('swipe')
touch.el.trigger('swipe' + (swipeDirection(touch.x1, touch.x2, touch.y1, touch.y2)))
touch = {}
// normal tap
else if ('last' in touch)
// delay by one tick so we can cancel the 'tap' event if 'scroll' fires
// ('tap' fires before 'scroll')
tapTimeout = setTimeout(function () {
// trigger universal 'tap' with the option to cancelTouch()
// (cancelTouch cancels processing of single vs double taps for faster 'tap' response)
var event = $.Event('tap')
event.cancelTouch = cancelAll
touch.el.trigger(event)
// trigger double tap immediately
if (touch.isDoubleTap) {
touch.el.trigger('doubleTap')
touch = {}
// trigger single tap after 250ms of inactivity
touchTimeout = setTimeout(function () {
touchTimeout = null
touch.el.trigger('singleTap')
touch = {}
.bind('touchcancel', cancelAll)
$(window).bind('scroll', cancelAll)
108 ['swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown', 'doubleTap', 'tap', 'singleTap', 'longTap'].forEach(function (m) {
$.fn[m] = function (callback) { return this.bind(m, callback) }
111 })(Zepto)
touch对象与上面mouseData功效相同，记录一些属性delta 用于记录两次点击的间隔，间隔短就是双击swipeDirection 函数与_getDir _getUDDir _getLRDir 功能相似，只不过代码更为简练，并且真正的私有化了63行代码开始，若是代码移动过便是划屏，否则就是点击，这点我也没考虑到73行，否则就应该是点击，这里并且判断是否存在结束时间，代码比较健壮，做了双击或者快速点击的判断
zepto代码我自然没有资格去评说，现在我们来看看他的兼容问题
PS：我这里很水，不太敢动源码，就加一个tap判断，因为也只是用了这个，具体大动手脚的事情，我们后面再做
这样做事因为，我们的项目主要是把click改成了tap事件，导致页面很多功能不可用
1 ['swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown', 'doubleTap', 'tap', 'singleTap', 'longTap'].forEach(function (m) {
//兼容性方案处理，以及后期资源清理，如果为假时候，就触发点击事件
var isTouch = 'ontouchstart' in document.documentE
if(m === 'tap' && isTouch === false) {
$.fn[m] = function (callback) { return this.bind('click', callback) }
$.fn[m] = function (callback) { return this.bind(m, callback) }
我就干了这么一点点事情......
今天耗时过长，暂时到这里，对鼠标等操作，对event参数的兼容我们后面点再看看
阅读(...) 评论()1. 为什么移动端使用touch事件
习惯在电脑上写js代码的同学可能想问一个问题：为什么移动端要使用touch事件，mouse事件和click事件在手机上不能触发么？其实这个问题很容易解决。首先，这两类事件在移动端也可以触发，但分别有一些问题：移动端会多点触屏，不适合mouse ，而click事件在手机上有 300ms延迟（不是bug）。因此，在移动端绑定事件，最好使用专门为移动端设计的touch事件。
2. touch事件介绍
触摸事件有以下几种类型：touchstart,touchmove,touchend这三种用的比较多，还有不常用的touchcancel事件。当然 MDN上还介绍了touchenter,touchleave事件，具体适用的场景及兼容性如何还未做测试，感兴趣的可自行研究。
js中不同的事件类型，event对象包含的属性也有所差异。我们先了解几个TouchEvent涉及的对象。
提示：文中的demo都是在 chrome 模拟器，iPhone6s(iOS9.3.2) safari，iOS微信上运行，安卓的兼容性未做测试
Touch对象代表一个触点，可以通过event.touches[0]获取，每个触点包含位置，大小，形状，压力大小，和目标 element属性。
screenX: 511,
screenY: 400,
clientX: 244.38,
clientY: 189.7,
pageX: 244.37,
pageY: 189.37,
identifier: ,
radiusX: 37.,
radiusY: 37.,
rotationAngle: 0,
target: {}
identifier
这个属性大家可能有疑惑，使用 Chrome 的模拟器发现多次触摸动作，值始终不变。用真机测试则不会有问题(我这里用的safari连接mac调试)。每次触摸包括start,move,end这整个过程，标志符都不变。下一次触摸动作开始，标志符就会变化。
screenY clientY
在 safari 中 screenY与clientY值是相等的，在iOS微信中两个数值不等，但单位应该也不一样。
radiusX radiusY rotationAngle
测试过程中safari及微信内置浏览器都不支持这些属性，chrome模拟器可以。
由Touch对象构成的数组，通过event.touches取到。一个Touch对象代表一个触点，当有多个手指触摸屏幕时，TouchList就会存储多个Touch对象，前面说到的identifier就用来区分每个手指对应的Touch对象。
TouchEvent
TouchEvent就是用来描述手指触摸屏幕的状态变化事件，除了一般DOM事件中event对像具备的属性，还有一些特有的属性。
一个TouchList对象，包含当前所有接触屏幕的触点的Touch对象，不论 touchstart 事件从哪个elment上触发。
targetTouches
也是一个TouchList对象，包含了如下触点的 Touch 对象：touchstart从当前事件的目标element上触发
这里大家可能产生了疑惑，这两个对象到底有什么区别？尤其是我们使用chrome模拟器中运行 demo,打印两个对象发现他们其实是一样的。
这两个对象的区别可以类比event.target与event.currentTarget 的区别，如果以前没留意，自行 js 高级程序设计。
touch相关的事件是一个整体，一开始touchstart不可能被触发，则后续touch事件也不会被触发。当然你可以不监听 touchstart 事件，按照操作一 touchmove，touchend 还是可以触发的。
touchend这里要特别注意，touches和targetTouches只存储接触屏幕的触点，要获取触点最后离开的状态要使用changedTouches。
之前也经常用touches[0]来获取Touch 对象，如果知道了 touches，targetTouches,changedTouches 的不同之处。在编写代码时可以更好的选择使用，程序也可以更严谨。
本文已收录于以下专栏：
相关文章推荐
一：touch事件分类？
1. touchstart：当手指触摸屏幕时触发。不管有多少个手指放在了屏幕上，只要再触摸一下屏幕就会触发。在此，我用小米的google浏览器做了一个实验，添加一个计数器，...
HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主...
程序员升职加薪指南！还缺一个“证”！
CSDN出品，立即查看！
先上实例代码：
近段时间使用html5开发一个公司内部应用，而触摸事件必然是移动应用中所必须的，刚开始以为移动设备上或许也会支持鼠标事件，原来是不支持的，好在webkit内核的移动浏览器支持touch事件，并且打包成...
游戏开发中一个很重要的功能就是交互，如果没有与用户的交互，那么游戏将变成动画，而处理用户交互就需要使用事件监听器了。
事件监听器(cc.EventListener) 封装用户的事件...
一开始做前端页面的时候，接触的也是js，但是随后便被简单高效的jquery吸引过去，并一直使用至今。
而js，则被我主观的认为底层技术而抛弃。
直到这几天工作需要，研究移动端页面的触屏滑动事件，搜...
诸如智能手机和平板电脑一类的移动设备通常会有一（capacitive touch-sensitivescreen），以捕捉用户的手指所做的交互。随着移动网络的发展，其能够支持越来越复杂...
在开始描述touch事件之前，需要先描述一下多触式系统中特有的touch对象（android和iOS乃至nokia最新的meego系统都模拟了类 似的对象）。这个对象封装一次屏幕触摸，一般来自于手指。...
如果我们允许用户在页面上用类似桌面浏览器鼠标手势的方式来控制WEB APP，这个页面上肯定是有很多可点击区域的，如果用户触摸到了那些可点击区域怎么办呢??
诸如智能手机和平板电脑一类的移...
如果你在开发PAD/手机所用WEB版应用，需要在桌面审查页面元素、调试脚本，模拟移动设备尺寸、事件、位置等信息，那么可以使用Chrome开发者工具（DevTools）提供的强大的移动仿真功能，支持主流...
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)}