Webモバイル側の基礎イベントの総括と応用

1.タッチイベントtouch
touchstart指をスクリーンに置いてトリガー
touchmove指がスクリーン上を移動し、連続的にトリガーします
touchend指がスクリーンから離れてトリガーされます
touchcancelシステムが追跡を停止したときにトリガーされ、このイベントは一時的に使用できません.
注意:
1.移動先イベントはリスニング関数のみで追加でき、onで追加できない
2.移動先でマウスを使わないイベント
3.移動先のイベントはブラウザのデフォルト動作をトリガーするので、イベントを呼び出すときにデフォルト動作をevにブロックします.preventDefault.
demo:

document.addEventListener('touchstart',function(ev){
	 ev.preventDefault();
});
var box=document.getElementById("box");
box.addEventListener('touchstart',function(){
	 this.innerHTML='     ';
});
box.addEventListener('touchmove',function(){
	 this.innerHTML='     ';
});
box.addEventListener('touchend',function(){
	 this.innerHTML='     ';
});

2.touchイベントオブジェクト
ev.touches現在の画面の指のリスト
ev.targetTouches現在の要素の指のリスト
ev.changedTouches現在のイベントをトリガーする指のリスト
各touchオブジェクトには、次のプロパティが含まれています(印刷ev.touchesは次のとおりです).
ClientX//ビューポート内のターゲットのX座標をタッチします.
ClientY//ビューポート内のターゲットのY座標をタッチします.
Identifier//タッチのユニークIDを表示します.
PageX//ターゲットのページ内のX座標をタッチします.
PageY//ターゲットのページ内のY座標をタッチします.
スクリーン内のターゲットのX座標をタッチします.
スクリーンのY座標をタッチします.
ターゲット//タッチのDOMノードターゲット.
demo:

var box=document.getElementById("box");
//   mousedown
box.addEventListener('touchstart',function(ev){
 //console.log(ev.touches);
 this.innerHTML=ev.touches.length;//     
});

3.デバイス加速度イベントdevicemotion
デバイスmotionは,動きセンサデータのイベントをカプセル化し,携帯電話の動き状態における動き加速度などのデータを取得できる.
加速度のデータには、次の3つの方向が含まれます.
x:携帯電話の画面を横に貫く;
y:携帯電話の画面を縦に貫く;
z:垂直携帯画面
重力の影響を排除していないデバイスがあるため、このイベントは2つのプロパティを返します.
1、accelerationIncludingGravity(重力を含む加速度)
2、acceleration(重力の影響を排除する加速度)
注意:このイベントはwindowにしか置けません
demo 1:重力加速度の値を表示する

window.addEventListener('devicemotion',function(ev){
 var motion=ev.accelerationIncludingGravity; box.innerHTML='x:'+motion.x+'
'+'y:'+motion.y+'
'+'z:'+motion.z;
});

demo 2:角が重力に合わせて左右に動く

window.addEventListener('devicemotion',function(ev){
 var motion=ev.accelerationIncludingGravity;
 var x=parseFloat(getComputedStyle(box).left);//box   left 
 box.style.left=x+motion.x+'px';
});

demo 3:揺れ応用原理

var box=document.getElementById('box');
var lastRange=0; //        
var isShake=false; //              
window.addEventListener('devicemotion',function(ev){
 var motion=ev.accelerationIncludingGravity;
 var x=Math.abs(motion.x);
 var y=Math.abs(motion.y);
 var z=Math.abs(motion.z);
 var range=x+y+z; //       
 if(range-lastRange>100){
 //                    
 isShake=true;
 }
 if(isShake && range<50){
 //      ，                
 box.innerHTML='   ';
 isShake=false;
 }
});

4.デバイス方向イベントdeviceorientation
デバイスオリエンテーションは方向センサデータをカプセル化したイベントで,携帯電話の静止状態における方向データ(携帯電話が置かれている角度,方位,向きなど)を取得できる.
ev.betaは装置のx軸上の回転角度を表し、範囲は-180~180である.デバイスが前後に回転する場合を説明します.
ev.gammaは、デバイスのy軸上の回転角度を示し、範囲は−90~90である.デバイスが左から右に回転する場合を説明します.
ev.Alphaは、デバイスのz軸に沿った回転角度を0~360の範囲で表す.
注意:このイベントはwindowにしか置けません
demo:

window.addEventListener('deviceorientation',function(ev){
 box.innerHTML='x   :'+ev.beta.toFixed(1)+'y   :'+ev.gamma.toFixed(1)+'z   :'+ev.alpha.toFixed(1);
});

5.ジェスチャーイベントgesture
demo 1:多指回転

var startDeg=0; //        
//            
box.addEventListener('gesturestart',function(){
 this.style.background='blue';
 //rotate(90deg)
 if(this.style.transform){
 startDeg=parseFloat(this.style.transform.split('(')[1]);
 }
});
//            
box.addEventListener('gesturechange',function(ev){
 /*this.style.background='black';
 this.innerHTML=ev.rotation;*/
 this.style.transform='rotate('+(ev.rotation+startDeg)+'deg)';
});
//            
box.addEventListener('gestureend',function(){
 this.style.background='green';
});

demo 2:マルチ指ズーム

document.addEventListener('touchstart',function(ev){
 ev.preventDefault();
});
document.addEventListener('touchmove',function(ev){
 ev.preventDefault();
});
var box=document.getElementById("box");
var startScale=1; //        
//            
box.addEventListener('gesturestart',function(){
 this.style.background='blue';
 //rotate(90deg)
 if(this.style.transform){
 startScale=parseFloat(this.style.transform.split('(')[1]);
 }
});
//            
box.addEventListener('gesturechange',function(ev){
 /*this.style.background='black';
 this.innerHTML=ev.rotation;*/
 var sc=ev.scale*startScale;
 sc=sc<0.5?0.5:sc;//       0.5
 this.style.transform='scale('+sc+')';
});
//            
box.addEventListener('gestureend',function(){
 this.style.background='green';
});

テキストリンク:https://m.yisu.com/zixun/195796.html