モバイル終了イベント

1.目的

モバイル終了タッチイベントの使用をマスター
タッチイベントとマウスイベントの違いを把握します
マスタータッチイベント
モバイルエンドスライド用

タッチイベントの終了を移動2.

オフに触れます
touchmove
touchEnd
タッチイベントとマウスイベントの違い
イベント点を通る：遅延のマウスイベント
デフォルトのイベントを防ぎます

防止touchstartをもたらした出来事の影響
事件を防ぐために影響力を持ってTouchmove
事件を防ぐために影響力を持ってTouchend

2.1touchイベント

ユーザスケール=可動端部が設けられていないではないスケール

touchstart：指のタッチは、指が要素上で押され
touchmove：指の動きは、要素の上に指を押した後、画面上の任意の場所に移動しました
touchend：あなたの指を持ち上げ、要素の後に指が画面上にリフトどこでも、押され

 <style>
        #box {
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
</head>
<body>
<div id="box"></div> 
<script>
{
    let box = document.querySelector("#box");
    box.addEventListener("touchstart",function(){
        console.log("手指按下");
    });
    box.addEventListener("touchmove",function(){
        console.log("手指移动");
    });
    box.addEventListener("touchend",function(){
        console.log("手指抬起");
    });
}
</script>
</body>

結果：

差分2.2touchイベントとマウスイベント

マウスイベントを同様に使用：

    box.addEventListener("mousedown",function(){
        console.log("鼠标按下");
    });
    box.addEventListener("mousemove",function(){
        console.log("鼠标移动");
    });
    box.addEventListener("mouseup",function(){
        console.log("鼠标抬起");
    });

タッチイベントとマウスイベントの区別：

マウスダウン：マウスダウンtouchstart：指のタッチを
MOUSEMOVE：マウスを移動touchmoveへ：指の動き
MOVEUP：マウスリフトtouchend：指アップ
タッチイベントは、唯一のモバイルエンドで使用することができます。マウスイベントは、PC側でのみを使用することができます。
touchstartタッチイベントが要素のみでトリガすることができ、touchmoveそしてtouchendは、画面上の任意の場所をトリガすることができ、マウスイベントは、要素内に誘発することができます。
タッチイベントは、トリガtouchmoveとtouchendイベントにtouchstart後にトリガされます。しかし、長いなどのMouseMoveマウスイベントはありませんマウスとしても要素にトリガーを押すことができます

イベント（クリック浸透）とソリューションを通じて2.3ポイント

イベントポイントは、モバイル端末によるバグです。

イベント点を通ります：

モバイル終わり、最後にマウスイベントをサポートするためではありませんか？モバイル端末は、クリックイベントなど互換性のあるマウスイベント、です。

モバイルマウスイベントの質問を終了：マウスイベント自体は300msの遅延を周りに終了します移動します。要素は、対応するマウスイベントを有する場合、指タッチの終了モバイル要素は直ちにイベントをタッチし、そして場合遅延300msの、現在のトリガ・イベントの座標を記録し、座標位置の要素を見つける実行された後、実行されます。ラベルの実質的に使用せずに淘宝網のようなイベントを介してその点です。

イベント・ポイント・ソリューションを通じて：

hrefのラベルを含めた携帯端末でのマウスイベントを、使用しないでください。
前300msの中に（推奨されません）を実行するために使用タイマー。
デフォルトのイベントe.preventDefaultを防ぎます（）。（e.preventDefaultは、最新のChromeで直接使用することはできません注（）、パッシブを追加する必要があります。偽のブラウザがデフォルトのイベントを防ぐことができます）

通常のPCの副作用の下で：一度だけBaiduの上でクリックして、消えDIV、Baiduはジャンプしません。

    <style>
        #box {
            position: absolute;
            left: 0;
            top: 0;
            width: 100px;
            height: 100px;
            background: red;
            opacity: .2;
        }
    </style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<div id="box"></div> 
<script>
{
    let box = document.querySelector("#box");
    box.addEventListener("mousedown",()=>{
        // console.log("鼠标按下");
        box.style.display = "none";
    });
}
</script>
</body>

モバイル端末（バグ）の影響の下で：のみBaiduの上で消える、とBaiduのページに直接ジャンプDIV、1回クリック

let box = document.querySelector("#box");
    box.addEventListener("touchend",()=>{
        box.style.display = "none";
    });

最後に、モバイルの浸透をクリックして解く：（hrefのラベルを含めた）マウスイベントを使用しないでください。ブラウザのデフォルトのイベントe.preventDefaultを（防ぎます）

let box = document.querySelector("#box");
    box.addEventListener("touchend",(e)=>{
        box.style.display = "none";
        e.preventDefault();
    });

デフォルトのイベントによって引き起こされる問題を防ぐために、2.4のモバイルエンド

一般的に、ブラウザのデフォルトの動作を防ぐために、携帯端末では推奨されません、それは多くの問題をもたらすでしょう。

最終的にはモバイルブラウザのデフォルトの動作を防ぐtouchstart：

マルチフィンガーページのズーム操作を禁止します。
ページ（プルダウン）のラバーバンド効果を禁止します。
スクロールバーが停止スクロールする（PC端末エミュレータホイールに利用できるのが、ホイールは終わりを移動されていません）。
防止マウスイベントトリガー;
入力ボックスを入力することができます。
防止のテキストを選択するための長押し、ポップアップメニュー。

最終的にはモバイルブラウザのデフォルトの動作を防ぐtouchmove：

マルチフィンガーページのズーム操作を禁止します。
ページ（プルダウン）のラバーバンド効果を禁止します。
スクロールのスクロールバーを防ぎます

最終的にはモバイルブラウザのデフォルトの動作を防ぐtouchmend：

防止マウスイベントトリガー;
入力ボックスを入力することができます。
防止のテキストを選択するための長押し、ポップアップメニュー。

デフォルトのイベントを防ぐtouchstart下端に移動した後：

    <style>
        #list {
            padding: 0;
            margin: 0;
        }
        #list li {
            height: 30px;
        }
    </style>
</head>
<body>
    <a href="http://www.baidu.com">百度</a><br>
    <input type="text">
    <ul id="list"></ul>
<script>
{
    let list = document.querySelector("#list");
    // 通过30个.创建30li
    list.innerHTML += [...(".".repeat(30))].map((item,index)=>{
        return `<li>这是第${index}个li</li>`;
    }).join("");
    
    document.addEventListener("touchstart",(e)=>{
        e.preventDefault();
    },{
        //最新Chrome浏览器下，不允许设置阻止浏览器默认行为，只有设置了passive:false后才会被允许
        passive:false
    });
}
</script>
</body>

エンドモバイルブラウザのデフォルトの動作でTouchmove停止：

document.addEventListener("touchmove",(e)=>{
        e.preventDefault();
    },{
        passive:false
    });

Touchendは、下のデフォルトの動作を防止するために、モバイルブラウザを終了します。

  document.addEventListener("touchend",(e)=>{
        e.preventDefault();
    },{
        passive:false
    });

詳細3.TouchEventオブジェクト

画面上で指のタッチが現在のリストです
現在の要素のリストTargetTouches指
現在のイベントのトリガーフィンガーchangedTouches一覧

    <style>
        #box {
            width: 300px;
            height: 200px;
            padding: 10px;
            background: red;
            font: 20px/40px "宋体";
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <script>
        {
            let box = document.querySelector("#box");

            document.addEventListener("touchstart", function (e) {
                //阻止浏览器默认行为，让多指在屏幕上时，不会有缩放等行为
                e.preventDefault();
            }, {
                passive: false
            });
            box.addEventListener("touchmove", function (e) {
                box.innerHTML = `
                当前屏幕上的手指列表：${e.touches.length}<br/>
                当前元素上的手指列表：${e.targetTouches.length}<br/>
                触发当前事件的手指列表：${e.changedTouches.length}
            `;
            });
        }
    </script>
</body>