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初心者なのでバグがあるかもしれません。自己責任で使ってください。