JavaScript モバイル イベントの基本と、一般的に使用されるイベント ライブラリの概要の詳細な紹介

この記事では、主に js モバイル イベントと共通イベント ライブラリの基本を詳しく紹介します。興味のある方は参考にしてください。

1. イベントの基本: click、mouseover、mouseenter、 Mouseleave、mousemove、mousedown、mouseup、mousewheel、keydown、keyup、load、scroll、blur、focus、change...

モバイル版: click (クリック)、load、scroll、blur、focus、change、input (keyup を置き換える) 、keydown)... TOUCH イベント モデル (1 本の指の操作を処理)、GESTURE イベント モデル (複数の指の操作を処理)

TOUCH: touchstart、touchmove、touchend、touchcancel

GESTURE:gesturestart、gesturechange、gestureend

1クリック: モバイル側では、クリックはクリック イベントではなく、クリックの動作とダブルクリックの動作を区別します。そのため、モバイル ブラウザがクリックを認識するのは、クリックだけです。クリックされたことが確認された後にのみ実行されます:

モバイル端末でクリックを使用する場合、300ミリ秒の遅延が発生します: 最初のクリックが完了した後、ブラウザは2番目のクリックがトリガーされるかどうかを確認するために300ミリ秒待つ必要がありますトリガーされている場合 2 回目のクリックはクリックではありません

以下のコードはモバイル側でクリック時間をシミュレートするコードです

​​

同時にfastclick.js を使用して、モバイル側の 300 ミリ秒の遅延を解決することもできます (github アドレス https://github.com/zhouxiaotian/fastclick)

2. クリック、シングルクリック、ダブルクリック、長押し、スライド、左スライド、右スライド、上にスライド、下にスライド

クリックしてダブルクリック(300MS)

クリックして長押し(750MS)

クリックしてスライド(X/Y軸オフセット距離が30PX以内かどうか、 30PXを超えるとスライドします)

左右にスワイプして上下にスライド(X軸オフセットの距離)>Y軸オフセット距離=左右にスワイプ、その逆は上下にスライドします

左右のスワイプ (オフセット距離 > 0 = 右スワイプ、反対は左スワイプ)

2. よく使用されるイベント ライブラリ

FastClick.js: CLICK イベントの 300MS 遅延を解決する TOUCH.js: Baiduクラウド モバイル ジェスチャ ライブラリ 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 はモバイル側でのみ開発されているため、下位バージョンの IE ブラウザはサポートされていません。 JQベースのIE

JQは多くのセレクタータイプとDOM操作メソッドを提供しますが、ZEPTOは一般的に使用されるいくつかのセレクターとメソッドのみを実装します。たとえば、JQ のアニメーション メソッドには、animate、hide、show、fadeIn、fadeOut、fadeToggle、slideDown、slideUp、slideToggle があります...しかし、ZEPTO には animate しかありません

ZEPTO のソース コード サイズは、 JQ

ZEPTOはモバイル端末開発のために特別に設計されています。モバイル端末開発のために生まれたため、JQよりもモバイル端末に適しています:

ZEPTOのアニメーションメソッドはCSS3アニメーションの操作をサポートしています

ZEPTOは、一般的に使用されるイベント操作を特別に用意していますモバイル端末: タップ、シングルタップ、ダブルタップ、ロングタップ、スワイプ、スワイプアップ、スワイプダウン、スワイプ左、スワイプ右

コード例は次のとおりです:

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 中国語 Web サイトの他の関連記事を参照してください。