手机浏览器常用手势动作监听封装
手势事件
- touchstart //当手指接触屏幕时触发
- touchmove //当已经接触屏幕的手指开始移动后触发
- touchend //当手指离开屏幕时触发
- touchcancel
触摸事件
- gesturestart //当两个手指接触屏幕时触发
- gesturechange //当两个手指接触屏幕后开始移动时触发
- gestureend
屏幕旋转事件
检测触摸屏幕的手指何时改变方向
touch事件支持的相关属性
- touches
- targetTouches
- changedTouches
- clientX // X coordinate of touch relative to the viewport (excludes scroll offset)
- clientY // Y coordinate of touch relative to the viewport (excludes scroll offset)
- screenX // Relative to the screen
- screenY // Relative to the screen
- pageX // Relative to the full page (includes scrolling)
- pageY // Relative to the full page (includes scrolling)
- target // Node the touch event originated from
- identifier // An identifying number, unique to each touch event
- 屏幕旋转事件:onorientationchange
判断屏幕是否旋转
function orientationChange() {
switch(window.orientation) {
case 0:
alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
case -90:
alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
case 90:
alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
case 180:
alert("风景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
};};
添加事件监听
addEventListener('load', function(){
orientationChange();
window.onorientationchange = orientationChange;
});
双手指滑动事件:
// 双手指滑动事件
addEventListener('load', function(){ window.onmousewheel = twoFingerScroll;},
false // 兼容各浏览器,表示在冒泡阶段调用事件处理程序 (true 捕获阶段)
);
function twoFingerScroll(ev) {
var delta =ev.wheelDelta/120; //对 delta 值进行判断(比如正负) ,而后执行相应操作
return true;
};