JavaScript 모바일 이벤트의 기본 사항에 대한 자세한 소개와 일반적으로 사용되는 이벤트 라이브러리 요약

이 글은 주로 js 모바일 이벤트의 기본 사항과 공통 이벤트 라이브러리를 자세하게 소개하고 있습니다. 관심 있는 친구들은 참고하시기 바랍니다.

1. 이벤트 기본 사항

PC: click, mouseover, mouseout, mouseleave, mousemove, mousedown, mouseup, mousewheel, keydown, keyup, 로드, 스크롤, 흐림, 초점, 변경...

모바일 버전: 클릭(클릭), 로드, 스크롤, 흐림, 초점, 변경, 입력(키업 대체) , keydown)... TOUCH 이벤트 모델(한 손가락 작업 처리), GESTURE 이벤트 모델(여러 손가락 작업 처리)

TOUCH: touchstart, touchmove, touchend, touchcancel

GESTURE:gesturestart,gesturechange,gestureend

1 클릭: 모바일 측에서 클릭은 클릭 이벤트가 아니라 클릭 이벤트입니다. 모바일 프로젝트에서는 클릭이 수행되는 작업과 더블클릭이 수행되는 작업을 구분하는 경우가 많습니다. 클릭이 확인된 후에만 실행됩니다.

모바일 단말기에서 클릭을 사용할 때 300ms의 지연이 발생합니다. 첫 번째 클릭이 완료된 후 브라우저는 두 번째 클릭이 실행되는지 확인하기 위해 300ms를 기다려야 합니다. . 두 번째 클릭은 클릭에 속하지 않습니다. 다음 코드는 모바일 단말기에서 클릭 시간을 시뮬레이션하는 코드입니다. 300ms 지연을 해결하는 fastclick.js (github 주소 https://github.com/zhouxiaotian/fastclick)

2. 클릭, 클릭, 더블클릭, 길게 누르기, 슬라이드, 왼쪽 슬라이드, 오른쪽 슬라이드, 슬라이드 업, 슬라이드 다운

클릭하고 더블클릭(300MS)

클릭하고 길게 누르기(750MS)

클릭하고 슬라이드합니다(X/Y축 오프셋 거리가 30PX 이내인지 여부, 30PX를 초과하면 슬라이딩됨) )

왼쪽 및 오른쪽으로 스와이프하고 위아래로 슬라이드(X축 오프셋 거리) > Y축 오프셋 거리 = 왼쪽 및 오른쪽 스와이프, 그 반대는 위아래로 스와이프)

왼쪽 및 오른쪽 스와이프(오프셋 거리) >0 = 오른쪽 스와이프, 반대쪽은 왼쪽 스와이프)

2. 일반적으로 사용되는 이벤트 라이브러리

FastClick.js: CLICK 이벤트의 300MS 지연 해결

TOUCH.js: Baidu Cloud 모바일 제스처 라이브러리 GitHub 주소 https: //github.com/Clouda-team/touch.code.baidu.com

인스턴스는 다음과 같습니다:

function on(curEle,type,fn){
   curEle.addEventListener(type,fn,false);
  }
  var oBox = document.querySelector('.box');
  //移动端采用click存在300ms延迟
  // oBox.addEventListener('click',function(){
  //  this.style.webkitTransform = 'rotate(360deg)'
  // },false)
  //使用TOUCH事件模型实现点击操作(单击&&双击)
  on(oBox,'touchstart',function(ev){
   //ev:TouchEvent事件 属性 type、target、preventDefault（returnValue）、stopPropagation、changedTouches、touches
   //changedTouches和touches都是手指信息的集合（touchList）,touches获取到值的必要条件只有手指还在屏幕上才可以获取，所以在touchend事件中如果想获取手指离开的瞬间坐标只能使用changedTouches获取
   var point = ev.touches[0];
   this['strX'] = point.clientX;
   this['strY'] = point.clientY;
   this['isMove'] = false;
  })
  on(oBox,'touchmove',function(ev){
   var point = ev.touches[0];
   var newX = point.clientX,
    newY = point.clientY;
   //判断是否发生滑动，我们需要判断偏移的值是否在30PX以内
   if(Math.abs(newX-this['strX'])>30 || Math.abs(newY-this['strY'])>30){
    this['isMove'] = true;
   }
  })
  on(oBox,'touchend',function(ev){
   if(this['isMove'] === false){
    //没有发生移动 点击
    this.style.webkitTransitionDuration = '1s';
    this.style.webkitTransform = 'rotate(360deg)';
    var delayTimer = window.setTimeout(function(){
     this.style.webkitTransitionDuration = '0s';
     this.style.webkitTransform = 'rotate(0deg)';
    }.bind(this),1000);
   }else{
    //滑动
    this.style.background = 'red';
   }
  })

HAMMER.js

Zepto.js: 모바일 측의 작은 JQ, JQ로 알려져 있습니다. PC 측에서 사용하기 때문에 코드에는 저버전 IE 브라우저에 대한 호환성 처리가 많이 포함되어 있는 반면, ZEPTO는 모바일 측에서 개발되었기 때문에 JQ 기반 IE 이하 버전은 지원하지 않습니다.

JQ는 제공합니다. 많은 선택기 유형과 DOM 작업 방법이 있지만 ZEPTO는 일반적으로 사용되는 일부 선택기 및 방법만 구현합니다. 예를 들어 JQ의 애니메이션 메소드에는 animate, hide, show, fadeIn, fadeOut, fadeToggle, SlideDown, SlideUp, SlideToggle 등이 있지만 ZEPTO에는 animate만 있습니다

　ZEPTO의 소스 코드 크기는 JEPTO의 소스 코드 크기보다 훨씬 작습니다. JQ

　ZEPTO는 모바일 단말 개발을 위해 탄생했기 때문에 JQ보다 모바일 단말에 더 적합합니다.

ZEPTO의 애니메이트 애니메이션 방식은 CSS3 애니메이션의 동작을 지원합니다.

ZEPTO는 일반적으로 사용되는 이벤트 동작을 특별히 준비했습니다. 모바일 단말기: tap, SingleTap, doubleTap, longTap, swipe, swipeUp, swipeDown, swipeLeft, swipeRight

예제 코드는 다음과 같습니다.

var oBox = document.querySelector('.box');
  //单击
  touch.on(oBox,'tap',function(ev){
   this.style.webkitTransitionDuration = '1s';
   this.style.webkitTransform = 'rotate(360deg)';
   var delayTimer = window.setTimeout(function(){
    this.style.webkitTransitionDuration = '0s';
    this.style.webkitTransform = 'rotate(0deg)';
    window.clearTimeout(delayTimer)
   }.bind(this),1000)
  })
  //双击
  touch.on(oBox,'doubletap',function(ev){
   this.style.webkitTransitionDuration = '1s';
   this.style.webkitTransform = 'rotate(-360deg)';
   var delayTimer = window.setTimeout(function(){
    this.style.webkitTransitionDuration = '0s';
    this.style.webkitTransform = 'rotate(0deg)';
    window.clearTimeout(delayTimer)
   }.bind(this),1000)
  })
  //长按
  touch.on(oBox,'hold',function(ev){
   this.style.backgroundColor = 'red';
  })

위 내용은 JavaScript 모바일 이벤트의 기본 사항에 대한 자세한 소개와 일반적으로 사용되는 이벤트 라이브러리 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!