Javascript如果檢測到持有運行for循環

我一直在搞清楚如何檢測它是否是一個HTML按鈕上的長按。目前它只是逐像素地移動snapJavascript如果檢測到持有運行for循環

有沒有辦法在按鈕上檢測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>

來源

2017-06-28 FreedomPride

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

來源

2017-06-28 04:56:24

這很有趣，所以我可以將事件綁定到基於onmousedown的按鈕上嗎？ – FreedomPride

好的，但按下按鈕時它只會觸發一次。如果您希望它在該印刷機的持續時間內持續啓動，則應該開始一個間隔。 –

這是修復它而不使用DOM屬性的非常合法的方法。老實說，我認爲這是不可能的，但採用間隔法。這很好。 – FreedomPride

我認爲你正在尋找onmousedown事件。當一個按鍵被按下時運行。您也需要設置一個onmouseup事件來定義密鑰發佈後會發生什麼。

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

來源

2017-06-28 04:53:55 shawon191

它的按鈕不是關鍵。我正在使用一個按鈕，但我怎麼會在輸入按鈕中檢測到它？ – FreedomPride

@FreedomPride然後你可以使用綁定到按鈕的'onmousedown'和'onmouseup'事件。看到這個演示https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmousedown – shawon191

@FreedomPride我已經更新了原來的答案。 – shawon191

一個通用的用戶界面將檢測次數（onClick），雙擊（onDoubleClick），DS把&丟棄（OnDrag ）。

否則，您可以使用onMouseDown和onMouseUp手動管理長時間點擊。

JQuery的可移動提供自動化的事件與onTapHold： https://api.jquerymobile.com/taphold/

有一個類似的答案在這裏：Long Press in JavaScript?

你說的話，「在一個for循環中運行它」，你因爲它不是異步的，所以在Javascript中不能這樣做。 forloop會阻止界面顯示您的修改。您可以使用計時器來觸發您的事件並處理您試圖實現的任何事情。

來源

2017-06-28 05:01:23

Javascript如果檢測到持有運行for循環

回答

相關問題