JavaScript 事件——“事件类型”中“设备事件”和“触摸与手势事件”的注意要点

  • A+
所属分类:JavaScript

设备事件

orientationchange事件

该事件的window.orientation属性中包含3个值:0表示肖像模式、90表示左旋转的横向模式、-90表示右旋转的横向模式。event对象不包含任何信息:

deviceorientationevent事件

MozOrientation事件,该事件已被移除,应该使用DeviceOrientationEvent事件

Warning: This experimental API was removed in Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), when support for the standard DeviceOrientationEvent was implemented. You should use that API instead.

但是DeviceOrientationEvent事件仍然是实验性的事件,目前有部分浏览器暂时不支持。

该事件的意图是告诉开发者设备在空间中朝向哪儿,设备在三维空间中是靠x、y、z轴来定位的。

事件对象包含:

  • alpha:围绕z轴旋转,y轴的度数差;0~360的值;
  • beta:围绕x轴旋转,z轴的度数差;-180~180的值;
  • gamma:围绕y轴旋转,z轴的度数差;-90~90的值;
  • absolute:表示设备是否返回一个绝对值;
  • compassCalibrated:表示设备的指南针是否校准过;

如:

devicemotion事件

该事件是要告诉开发者设备什么时候移动,如通过该事件检测设备是否在往下掉,是否被走着的人拿在手里等等。

属性:

  • acceleration:包含x、y、z属性的对象,不考虑重力的情况下,每个方向的加速度;
  • accelerationIncludingGravity:包含x、y、z属性的对象,在考虑z自然重力加速度的情况下,每个方向上的加速度;
  • interval:毫秒值,必须在另一个devicemotion事件触发前传入;
  • rotationRate:包含表示方向的alpha、beta和gamma属性的对象;

如果读取不到值,会返回null,所以应该先检测它们的值是否为null:

触摸与手势事件

触摸事件

兼容DOM的触摸事件

  • touchstart:触摸屏幕时触发;
  • touchmove:滑动时触发,调用preventDefault()函数可阻止滚动;
  • touchend:当手指从屏幕上移开时触发;
  • touchcancel:当系统停止跟踪触摸时触发;

上面的事件都会冒泡,都可以取消。每个触摸事件的event对象都提供了在鼠标事件中常见的属性。

跟踪触摸的事件

  • touches:表示当前跟踪的触摸操作的Touch对象的数组;
  • targetTouches:特定于事件目标的Touch对象的数组;
  • changedTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组;

每个Touch对象包含的属性:

  • clientX:视口中的x坐标;
  • clientY:;
  • identifier:标识触摸的唯一ID;
  • pageX:触摸目标在页面中的x坐标;
  • pageY:;
  • screenX:触摸目标在屏幕中的x坐标;
  • screenY:;
  • target:触摸DOM节点目标;

如:

暂时不清楚为什么touchend无反应。

手势事件

  • gesturestart:当一个手指已经按在屏幕上而另一个手指又触摸屏幕时触发;
  • gesturechange:当触摸屏幕的任何一个手指的位置发生变化时触发;
  • gestureend:当任何一个手指从屏幕上面移开时触发;

其中event还包括除鼠标事件的属性之外另外两个属性:rotation和scale:其中rotation属性表示旋转的角度,从0开始,负值表示逆时针旋转,正值表示顺时针旋转;scale属性从1开始,随着距离拉大而增加,随着距离缩小而减小:

写成:

weinxin
我的微信公众号
我的微信公众号扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: