移动开发事件

 

手机浏览器常用手势动作监听封装

手势事件

  • touchstart //当手指接触屏幕时触发
  • touchmove //当已经接触屏幕的手指开始移动后触发
  • touchend //当手指离开屏幕时触发
  • touchcancel

触摸事件

  • gesturestart //当两个手指接触屏幕时触发
  • gesturechange //当两个手指接触屏幕后开始移动时触发
  • gestureend

屏幕旋转事件

  • onorientationchange

检测触摸屏幕的手指何时改变方向

  • orientationchange

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;
};

你可能感兴趣的:(移动开发事件)