如何在JavaScript中设置当按下Shift键3次时触发事件?

huangapple go评论64阅读模式
英文:

How to set trigger on 3 times Shift press in JS?

问题

function Press(){
    document.querySelector("body").addEventListener("keyup", event => {
        if(event.key !== "Shift") return;
        document.getElementById("myElement").click();
        event.preventDefault();
    });
}

UPDATE:

这是经 @deceze 帮助制作的工作代码

function Press(){
    document.addEventListener("keyup", event => {
        if(event.key !== "Shift") return;
        shift_pressed = typeof shift_pressed !== 'undefined' ?  shift_pressed : 0;
        shift_pressed++;
        setTimeout(() => {
            shift_pressed= shift_pressed-1 >= 0 ? shift_pressed-1 : 0;
        }, 1000);
        if (shift_pressed===3){
            document.getElementById("myElement").click();
            shift_pressed=0;
        }
        event.preventDefault();
    });
}

感谢大家的帮助。

英文:
function Press(){
    document.querySelector("body").addEventListener("keyup", event => {
        if(event.key !== "Shift") return;
        document.getElementById("myElement").click();
        event.preventDefault();
    });
}

I set keyup for press Shift 1 time. How can I set it for 3 fast times? So that after Shift Shift Shift an event (document.getElementById("myElement").click()) is executed?

UPDATE:

this is working code made with @deceze help

function Press(){
    document.addEventListener("keyup", event => {
        if(event.key !== "Shift") return;
        shift_pressed = typeof shift_pressed !== 'undefined' ?  shift_pressed : 0;
        shift_pressed++;
        setTimeout(() => {
            shift_pressed= shift_pressed-1 >= 0 ? shift_pressed-1 : 0;
        }, 1000);
        if (shift_pressed===3){
            document.getElementById("myElement").click();
            shift_pressed=0;
        }
        event.preventDefault();
    });
}

thanks everyone for the help

答案1

得分: 1

function Press(){
const THRESHOLD = 250;
let counter = 0;
let millis = Date now();
document.querySelector("body").addEventListener("keyup", event => {
if(event.key !== "Shift") return;
if(Date now()-millis > THRESHOLD) counter = 0;
if(++counter%3===0) {
document.getElementById("myElement").click();
event.preventDefault();
}
millis = Date now();
});
}

英文:

That should trigger the click on every third press of the Shift key

        function Press(){
            const THRESHOLD = 250;
            let counter = 0;
            let millis = Date.now();
            document.querySelector("body").addEventListener("keyup", event => {
                if(event.key !== "Shift") return;
                if(Date.now()-millis > THRESHOLD) counter = 0;
                if(++counter%3===0) { 
                 document.getElementById("myElement").click();
                 event.preventDefault();
                }
                millis = Date.now();
            });
        }

答案2

得分: 0

只需为清除点击<kbd>Shift</kbd>计数的setTimeout创建代码,并定义clearTimeout来清除每次单击的超时。

document.getElementById("myElement").onclick = () => {
  console.log('Hello World!');
}

let clearTime = 1000;
let counterShift = 0;
let timeout;
document.querySelector("body").addEventListener("keyup", event => {
    if(event.key !== "Shift") return;
    clearTimeout(timeout);
    counterShift++;
    console.log('number click:', counterShift);
    if(counterShift == 3) {
      document.getElementById("myElement").click();
      event.preventDefault();
      counterShift = 0;
    }
    timeout = setTimeout(() => {
      counterShift = 0;
    }, clearTime);
});
<button id="myElement">Test</button>
英文:

Just create setTimeout for clearing counter of clicking <kbd>Shift</kbd> and define clearTimeout clear the timeout for every single click.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

document.getElementById(&quot;myElement&quot;).onclick = () =&gt; {
  console.log(&#39;Hello World!&#39;);
}

let clearTime = 1000;
let counterShift = 0;
let timeout;
document.querySelector(&quot;body&quot;).addEventListener(&quot;keyup&quot;, event =&gt; {
    if(event.key !== &quot;Shift&quot;) return;
    clearTimeout(timeout);
    counterShift++;
    console.log(&#39;number click:&#39;,counterShift);
    if(counterShift == 3) {
      document.getElementById(&quot;myElement&quot;).click();
      event.preventDefault();
      counterShift = 0;
    }
    timeout = setTimeout(()=&gt;{
      counterShift = 0;
    }, clearTime);
});

<!-- language: lang-html -->

&lt;button id=&quot;myElement&quot;&gt;Test&lt;/button&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年4月4日 18:12:59
  • 转载请务必保留本文链接:https://go.coder-hub.com/75928147.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定