mousedownとtouchstart

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="button">  ←これ
        ボタン
    </button>
</body>
</html>

このbuttonに

mousedown

document.getElementById("button").addEventListener("mousedown",e => {
    //id"button"上でマウスのボタンが下がると実行される
});

こうする事でマウスボタンが下がる事を検知できます。

touchstart

touchstartは

document.getElementById("button").addEventListener("touchstart",e => {
    //id"button"上で画面に指が触れると実行される
});

これで画面に指が触れたときに処理を実行できます。

発生する問題

document.getElementById("button").addEventListener("mousedown",e => {
    //マウスのボタンが下がった時に実行
});

document.getElementById("button").addEventListener("touchstart",e => {
    //画面が触れたときに実行
});

このように一つの要素(button)に対してmouse〇〇とtouch〇〇の両方を指定した時、かつタッチでこの要素に触れた時に発生します。

この条件でタッチした時、

touchstart
↓
touchend
↓
mousedown
↓
mouseup

の順番でmouse〇〇も動作して二回クリックした事になってしまいます

解決方法

let a = {};//適当に名前をつけてください。

function ck(click_or_touch,after_function){//この関数を使って問題を解決する
    if(a.status){//データがある時
        if(a.status == click_or_touch){//1000ms前の入力方法と同じ
            after_function();//処理を実行する
        };
    }else{//データが無い時
        a.status = click_or_touch;//入力方法を記録
        setTimeout(function(){
            delete a.status;//データを削除する
        },1000/*データが削除されるまでの時間(ms)*/);
        after_function();//処理を実行する
    };
};

document.getElementById("button").addEventListener("mousedown",e => {
    //マウスのボタンが下がると実行される
    ck("mouse",function(){
        //クリックされたときに実行したい処理
    });
});

document.getElementById("button").addEventListener("touchstart",e => {
    //画面に指が触れた時に実行される
    ck("touch",function(){
        //タップされた時の処理
    });
});

これで解決できます。

解説

aになっていますが適当に名前をつけてください。

let a = {};//適当に名前をつけてください。

次に、この関数を一度通す事で一秒間同じ入力方法しか使えないようにして対策をしています。

function ck(click_or_touch/*←入力の種類を文字列で*/,after_function/*実行しても問題ない時に実行する処理*/){
    if(a.status){//さっきのaにデータがある時
        if(a.status == click_or_touch){//1000ms前の入力方法と同じなら
            after_function();//処理を実行する
        };
    }else{//aにデータが無い時
        a.status = click_or_touch;//aにデータを設定
        setTimeout(function(){//1000ms後にデータが削除されるようにする
            delete a.status;//データを削除する
        },1000/*データが削除されるまでの時間(ms)*/);
        after_function();//処理を実行する
    };
};

あとは

document.getElementById("button").addEventListener("mousedown",e => {
    //マウスのボタンが下がると実行される
    ck("mouse",function(){ ←さっきの関数を実行する
        //クリックされたときに実行したい処理
    });
});

document.getElementById("button").addEventListener("touchstart",e => {
    //画面に指が触れた時に実行される
    ck("touch",function(){ ←さっきの関数を実行する
        //タップされた時の処理
    });
});

こうしてさっき作った関数を実行すれば1000msの間別の入力方法は受け付けなくなります。

注意

JavaScript初心者なのでバグがあるかもしれません。自己責任で使ってください。