onclick 长按按钮3秒后才启动这个按钮

Question

onclick 长按按钮3秒后才启动这个按钮
求解

Answer 1

 function test10(){
        alert("延迟三秒")
    }
    var btn=document.querySelector(".test");
    btn.onclick=function(){
        setTimeout(test10,3000);
    };

Answer 2

长按和延时不是一个概念，延时是点一下3秒后也能点击。长按是按住3秒才能点击<input id="btn" type="button" value="按住三秒"><script>
  var btn = document.getElementById('btn')
  var canClick = false
  var keydown = false
  var start = 0
  var end = 0
  btn.onmouseleave = () => {
    keydown = false
  }
  btn.onmousedown = (e) => {
    keydown = true
    start = Date.now()
  }
  btn.onmouseup = () => {
    if (keydown) {
      end = Date.now()
      console.log('长按时间:'+(end - start)/1000)
      if ((end - start)/1000 > 3) {
        canClick = true
      }
    }
    keydown = false
  }
  btn.onclick = () => {
    if (canClick) {
      // do sth
    } else {
      alert('点击无效')
    }
  }
</script>

Answer 3

补充一下bugbtn.onclick = () => {
    if (canClick) {
      // do sth
      canClick=false;
    } else {
      alert('点击无效')
    }
  }