forループが検出された場合にループが実行される

Question

私は、HTMLボタンでlongclickであるかどうかを検出する方法を考え出しています。 現在のところ、ピクセル単位で移動していますsnap

ボタンでholdを検出してforloopで実行する方法はありますか？ 私はonlongclickを試しましたが、運がありません。

function load() { 
    var context = document.getElementById('main').getContext("2d"); 
    var left = document.getElementById('left'); 
    var down = document.getElementById('down'); 
    var right = document.getElementById('right'); 
    var imgLoaded = false; 
    var posX = 250; 
    var posY = 0; 
    var snap = 10; 


    var img = new Image(); 
    img.onload = function() { 
     imgLoaded = true; 
     context.drawImage(img, posX, posY); 
    }; 
    img.src = "start.png"; 

    // left button click 
    left.onclick = function() { 
     if (!imgLoaded) return; 
     posX = posX - snap; 
     context.clearRect(0, 0, context.canvas.width, context.canvas.height); 
     context.drawImage(img, posX, posY); 
    }; 

    // down button click 
    down.onclick = function() { 
     if (!imgLoaded) return; 
     posY = posY + snap; 
     context.clearRect(0, 0, context.canvas.width, context.canvas.height); 
     context.drawImage(img, posX, posY); 
    }; 

    // right button click 
    right.onclick = function() { 
     if (!imgLoaded) return; 
     posX = posX + snap; 
     context.clearRect(0, 0, context.canvas.width, context.canvas.height); 
     context.drawImage(img, posX, posY); 
    }; 

} 

HTMLボタン： -

<aside class="socialNetworkNavBar"> 
      <div id="left" style="margin-right: 50px;" class="socialNetworkNav"> 
       <!-- Add a Anchor tag with nested img tag here --> 
       <input type="image" src="images/left.png"> 

      </div> 
      <div id="down" style="margin-right: 50px;" class="socialNetworkNav"> 
       <!-- Add a Anchor tag with nested img tag here --> 
       <input type="image" src="images/down.png"> </div> 
      <div id="right" style="margin-right: 50px;" class="socialNetworkNav"> 
       <!-- Add a Anchor tag with nested img tag here --> 
       <input type="image" src="images/UXwr4.png"> 
      </div> 

     </aside> 

Answer 1

clickマウスがを押したとボタンをリリースイベント、です。あなたはそれが長いクリックしたかどうかを検出したい場合は、mousedownリスナーを追加し、ボタンが押されたことを時間を保存可能性があります

left.onmousedown = function() { 
    left.dataset.start = new Date().getTime(); 
}; 

left.onclick = function() { 
    var diff = new Date() - parseInt(left.dataset.start); 
    if(diff/1000 > 3) { 
     // Mouse-down was more than three seconds ago, this was a long click 
    } 
}; 

あなたはボタンがある間、継続的にアクションを実行する場合まだ押され、あなたが間隔として、そのアクションを実行することができ、ボタンを離したときに、それが中断された：

left.onmousedown = function() { 
    left.dataset.interval = window.setInterval(function() { 
     // perform action 
    }, 250); 
}; 

left.onmouseup = function() { 
    window.clearInterval(parseInt(left.dataset.interval)); 
}; 

left.onmouseout = function() { 
    window.clearInterval(parseInt(left.dataset.interval)); 
}; 

Answer 2

私はあなたがonmousedownイベントを探していると思います。キーが押されたときに実行される。キーを放した後に何が起こるかを定義するには、onmouseupイベントも設定する必要があります。

https://www.w3schools.com/jsref/event_onmousedown.asp

Answer 3

一般的なUIをダブルクリック（onDoubleClick）、クリ​​ック数（onClick）を検出します、&ドロップ（OnDragはドラッグ）。

それ以外の場合は、onMouseDownとonMouseUpで手動で長いクリックを管理できます。

jQueryのonTapHoldで携帯に自動化されたイベントを提供することができます。 https://api.jquerymobile.com/taphold/

をここで同様の答えがあります：あなたが言ったことについてLong Press in JavaScript?

---

、 "forloopでそれを実行するには"、あなたはそれは非同期ではないので、Javascriptでそれを行うことはできません。 forループは、インターフェースがあなたの変更を表示しないようにします。タイマーを使用してイベントをトリガーし、達成しようとしていることを処理することができます。