Javascript, wenn zu erkennen, halten in Schleife zu laufen

Question

Ich habe herausgefunden, wie man erkennt, wenn es ein Longclick auf eine HTML-Schaltfläche ist. Derzeit ist es nur Pixel bewegt Pixel snap

Gibt es eine Möglichkeit hold auf eine Schaltfläche zu erfassen und in einem forloop laufen? Ich habe versucht onlongclick und es gibt kein Glück darin.

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); 
    }; 

} 

Die HTML-Buttons: -

<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 ist ein Ereignis, wo die Maus und veröffentlicht die Taste gedrückt hat. Wenn Sie ermitteln möchten, ob das war ein lange klicken, können Sie einen mousedown Zuhörer, hinzufügen und die Zeit speichern, dass die Taste gedrückt wurde:

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 
    } 
}; 

Wenn Sie möchten, um kontinuierlich eine Aktion durchführen, während eine Schaltfläche noch gedrückt, können Sie diese Aktion als Intervall laufen konnte, dass unterbrochen wird, wenn die Taste losgelassen wird:

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

Ich glaube, Sie für onmousedown Veranstaltung suchen. Was läuft, wenn eine Taste gedrückt wird. Sie müssen auch ein Ereignis onmouseup einrichten, um zu definieren, was passiert, nachdem der Schlüssel freigegeben wurde.

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

Answer 3

Eine generische UI Klicks erkennt (onClick), Double-Klicks (onDoubleClick), Drags & Drop (OnDrag).

Andernfalls können Sie lange Klicks mit onMouseDown und onMouseUp manuell verwalten.

JQuery kann ein automatisiertes Ereignis auf Mobile mit onTapHold bieten: https://api.jquerymobile.com/taphold/

Es gibt eine ähnliche Antwort hier: Long Press in JavaScript?

---

Über was Sie gesagt haben, "es in einem forloop laufen", Sie kann das in Javascript nicht tun, da es nicht asynchron ist. Ein Forloop würde verhindern, dass die Schnittstelle Ihre Änderungen anzeigt. Sie können einen Timer verwenden, um Ihr Ereignis auszulösen und alles zu verarbeiten, was Sie erreichen möchten.