У меня есть кнопка на моем сайте, которая представляет собой простой тренажер прицеливания, и вы должны нажимать кнопку левой кнопкой мыши. Все работает как шарм, но если вы нажмете кнопку и удерживаете ее, затем удерживаете клавишу ввода, вы можете щелкнуть 303 раза за 10 секунд, и это обман. Я хочу, чтобы он нажимался только левой кнопкой мыши. Объясните, пожалуйста, свой ответ.

Ссылка на сайт: https://mfa-aim-trainer.netlify.app

var b = document.querySelector("button");
var score = document.getElementById('score');
var counter = 0;
var btn = document.getElementById("button");
var tensec = document.getElementById("10sec");
var pxs = document.getElementsByClassName('div');
var scr = document.getElementById("scr");
var mis = document.getElementById("mis");
var htm = document.getElementById("htm");
var missc = 0;
var height1 = 100;
var width1 = 100;
var theLeftSide = document.getElementById("theLeftSide");
var resetbtn = document.getElementById("reset");
var vr = document.getElementById("vr");
var hit = 1080;
var fontsize = 25;
var ulcls = document.getElementsByClassName("theul");
var ul = document.getElementById('10sec');
var best = document.getElementById("best");
var cntrspn = document.getElementsByClassName("cntrspn");
var lists = document.getElementsByClassName("lists");

b.addEventListener("click", change);
b.addEventListener("click", plus);
htm.addEventListener("click", miss);
pxs[0].addEventListener("click", plussize);
pxs[1].addEventListener("click", minesize);
theLeftSide.addEventListener("click", leftsclick);
b.addEventListener("click", misscmines);
resetbtn.addEventListener("click", resetall);

function plussize() {
  height1 += 10;
  width1 += 10;
  missc++
  missc + 1
  missc--
  fontsize += 3;

  b.style.fontSize = fontsize + "px";
  b.style.height = height1 + "px";
  b.style.width = width1 + "px";
  missc - 1;
}

function minesize() {
  height1 -= 10;
  width1 -= 10;
  missc++
  missc + 1
  missc--
  fontsize -= 3;

  b.style.fontSize = fontsize + "px";
  b.style.height = height1 + "px";
  b.style.width = width1 + "px";
  missc - 1;
}

function miss() {
  missc++
  mis.innerHTML = missc - counter;

}


setInterval(function() {
  var misc = missc - counter;
  ul.style.height = window.offsetheight;

  var currscr = counter;


  for (var i = 0; i < cntrspn.length; i += 1) {

    if (parseInt(scr.textContent) > parseInt(best.textContent)) {
      best.textContent = scr.textContent;
    } else {
      console.log("no new best");
    }
  }


  mis.textContent = missc - counter;

  ul.innerHTML += '<li class="lists">' + '<span class="cntrspn">' + counter + '</span>' + "-" + misc + '</li>';

  missc = 0;
  misc = 0;
  counter = 0;
  scr.textContent = counter;
  mis.textContent = missc;


}, 10000);


function change() {
  var i = Math.floor(Math.random() * 1500) + 1;
  var j = Math.floor(Math.random() * 250) + 1;
  var r = Math.floor(Math.random() * -1100) + 1;

  b.style.padding = 0 + "px";
  b.style.left = i + "px";
  b.style.top = j + "px";
  b.style.right = r + "px";

}

function plus() {
  missc--
  missc - 1
  counter++;
  scr.textContent = counter;

}

function leftsclick() {
  missc--
  missc - 1
}

function misscmines() {
  missc++
  missc + 1
}

function resetall() {
  window.location.reload(true);
}
body {
  margin: 0px;
  padding: 0px;
}

.btn {
  position: relative;
  height: 125px;
  width: 125px;
  border-radius: 10px;
  display: block;
  background-color: whitesmoke;
  font-size: 20px;
  text-align: center;
  user-select: none;
  font-family: 'Roboto Mono', monospace;
}

.btn:hover {
  background-color: #dcdcdc;
  border-color: #dcdcdc;
}

.btndiv {
  display: grid;
  gap: 10px;
  top: 5px;
  left: 200px;
  width: 1724px;
  position: fixed;
  user-select: none;
}

.sizes {
  width: 80px;
  height: auto;
  color: white;
  background-color: #2f2f2f;
  cursor: pointer;
  font-family: 'Roboto Mono', monospace;
  font-size: 20px;
  padding-left: 5px;
  user-select: none;
}

.score {
  font-family: 'Roboto Mono', monospace;
  color: white;
  font-size: 30px;
  white-space: nowrap;
  user-select: none
}

.shr7 {
  font-size: 20px;
  font-family: 'Roboto Mono', monospace;
  left: 100px;
  color: white;
  left: 49%;
  padding-left: 5px;
  user-select: none
}

.allcont {
  display: grid;
  grid-template-columns: repeat(25, 1fr);
  gap: 10px;
  padding-left: 5px;
}

.theLeftSide {
  width: 190px;
  display: block;
  height: 100vh;
  background-color: #2f2f2f;
  border-right: 6px solid #464646;
  overflow-y: auto;
  overflow-x: hidden;
}

.theul {
  background-color: #2f2f2f;
  color: white;
  width: 150px;
  margin-bottom: 0px;
  font-family: 'Roboto Mono', monospace;
  border-right: solid 6px #464646;
  display: block;
}

li {
  font-family: 'Roboto Mono', monospace;
  font-size: 15px;
  color: white;
  user-select: none;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #2a2a2a;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #252525;
}
<!DOCTYPE html>
<html id="htm" style="font-family: 'Roboto Mono', monospace; user-select: none;">

<head>
  <meta charset="utf-8">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&display=swap" rel="stylesheet">
  <link rel="shortcut icon" type="image/png" href="icons\icon.png">
  <link rel="stylesheet" type="text/css" href="aimcss.css">


  <div class="btndiv"><button id="btn" class="btn"><b>Click me</b></button></div>

  <div id="theLeftSide" class="theLeftSide">
    <div id="pxs" class="sizes div">+ 10px</div>
    <div id="pxs" class="sizes div">- 10px</div>

    <div class="allcont">
      <p id="score" class="score">score:
        <p id="scr" class="score">0</p>
      </p>
      <title>Aim trainer</title>

    </div>

    <div class="allcont">
      <p id="misses" class="score">misses:
        <p id="mis" class="score">0</p>
      </p>
    </div>

    <br onscroll="func()">

    <div class="allcont" id="bestdiv">
      <p class="score">Best:
        <p class="score" id="best">0</p>
      </p>
    </div>

    <br>

    <div style=" padding-left: 5px;"><button style="height: 30px; width: 70px; font-size: 15px; font-family: 'Roboto Mono', monospace;" id="reset"><b>RESET</b></button></div>

    <br><br>

    <p type="inherit" class="shr7">• Score-Misses</p>

    <ol start="1" id='10sec' class='theul'>
      <li style="display: none;" class="lists"><span class="cntrspn">0</span>-0</li>
    </ol>

  </div>


</head>


<body id="bod" style="background-color: #181818;">




  <script type="text/javascript" src="aimscript.js">
  </script>

</body>

</html>
0
Mfa 15 Сен 2021 в 20:09

3 ответа

Лучший ответ

Я рекомендую проверять переменную event.pointerId, когда происходит клик.

b.addEventListener('click', change);

const change = (event) => {
    if(event.pointerId === -1) {
        // this is a "keyboard click" that you want to avoid
    }
    else {
        // actual click
    }
};

Когда используется мышь, pointerId не должно быть отрицательным. Когда клавиатура используется для «щелчка», идентификатор будет равен -1.

2
nullromo 15 Сен 2021 в 17:23

Если я правильно понимаю, вы хотите остановить крайний случай, когда пользователи могут удерживать нажатой клавишу ввода и левую кнопку мыши, поскольку они будут продолжать подсчитывать очки.

Я бы рекомендовал прослушивать клавишу ввода, используя события keydown и keyup, чтобы отслеживать, когда нажата клавиша ввода, а затем использовать состояние, чтобы отключить любую логику, пока она нажата.


let isEnterPressed = false

window.addEventListener("keydown", e => {
  if(e.keyCode === 13) 
    isEnterPressed = true // 13 is keycode for enter
})

window.addEventListener("keyup", e => {
  if(e.keyCode === 13) 
    isEnterPressed = false // 13 is keycode for enter
})

Тогда просто используйте isEnterPressed, чтобы заблокировать любую логику, запускаемую щелчком.

Это всего лишь простой пример, вы можете обобщить его, чтобы отслеживать любой ввод с клавиатуры.

1
Carl Pryke 15 Сен 2021 в 17:20

Вы можете использовать прослушиватель keypress на кнопке и preventDefault(), когда триггеры ввода на кнопку priventDefault() остановят это

var b = document.querySelector("button");
var score = document.getElementById('score');
var counter = 0;
var btn = document.getElementById("button");
var tensec = document.getElementById("10sec");
var pxs = document.getElementsByClassName('div');
var scr = document.getElementById("scr");
var mis = document.getElementById("mis");
var htm = document.getElementById("htm");
var missc = 0;
var height1 = 100;
var width1 = 100;
var theLeftSide = document.getElementById("theLeftSide");
var resetbtn = document.getElementById("reset");
var vr = document.getElementById("vr");
var hit = 1080;
var fontsize = 25;
var ulcls = document.getElementsByClassName("theul");
var ul = document.getElementById('10sec');
var best = document.getElementById("best");
var cntrspn = document.getElementsByClassName("cntrspn");
var lists = document.getElementsByClassName("lists");

b.addEventListener("click", change);
b.addEventListener("click", plus);
htm.addEventListener("click", miss);
pxs[0].addEventListener("click", plussize);
pxs[1].addEventListener("click", minesize);
theLeftSide.addEventListener("click", leftsclick);
b.addEventListener("click", misscmines);
resetbtn.addEventListener("click", resetall);

function plussize() {
  height1 += 10;
  width1 += 10;
  missc++
  missc + 1
  missc--
  fontsize += 3;

  b.style.fontSize = fontsize + "px";
  b.style.height = height1 + "px";
  b.style.width = width1 + "px";
  missc - 1;
}

function minesize() {
  height1 -= 10;
  width1 -= 10;
  missc++
  missc + 1
  missc--
  fontsize -= 3;

  b.style.fontSize = fontsize + "px";
  b.style.height = height1 + "px";
  b.style.width = width1 + "px";
  missc - 1;
}

function miss() {
  missc++
  mis.innerHTML = missc - counter;

}


setInterval(function() {
  var misc = missc - counter;
  ul.style.height = window.offsetheight;

  var currscr = counter;


  for (var i = 0; i < cntrspn.length; i += 1) {

    if (parseInt(scr.textContent) > parseInt(best.textContent)) {
      best.textContent = scr.textContent;
    } else {
      console.log("no new best");
    }
  }


  mis.textContent = missc - counter;

  ul.innerHTML += '<li class="lists">' + '<span class="cntrspn">' + counter + '</span>' + "-" + misc + '</li>';

  missc = 0;
  misc = 0;
  counter = 0;
  scr.textContent = counter;
  mis.textContent = missc;


}, 10000);


function change(e) {
  var i = Math.floor(Math.random() * 1500) + 1;
  var j = Math.floor(Math.random() * 250) + 1;
  var r = Math.floor(Math.random() * -1100) + 1;

  b.style.padding = 0 + "px";
  b.style.left = i + "px";
  b.style.top = j + "px";
  b.style.right = r + "px";

}

function plus() {
  missc--
  missc - 1
  counter++;
  scr.textContent = counter;

}

function leftsclick() {
  missc--
  missc - 1
}

function misscmines() {
  missc++
  missc + 1
}

function resetall() {
  window.location.reload(true);
}

b.addEventListener("keypress", e => {
  let key = e.keyCode || e.charCode;
  
  if (key == 13) {
    e.stopPropagation();
    e.preventDefault();
  }
})
body {
  margin: 0px;
  padding: 0px;
}

button{
  outline: none;
}

.btn {
  position: relative;
  height: 125px;
  width: 125px;
  border-radius: 10px;
  display: block;
  background-color: whitesmoke;
  font-size: 20px;
  text-align: center;
  user-select: none;
  font-family: 'Roboto Mono', monospace;
}

.btn:hover {
  background-color: #dcdcdc;
  border-color: #dcdcdc;
}

.btndiv {
  display: grid;
  gap: 10px;
  top: 5px;
  left: 200px;
  width: 1724px;
  position: fixed;
  user-select: none;
}

.sizes {
  width: 80px;
  height: auto;
  color: white;
  background-color: #2f2f2f;
  cursor: pointer;
  font-family: 'Roboto Mono', monospace;
  font-size: 20px;
  padding-left: 5px;
  user-select: none;
}

.score {
  font-family: 'Roboto Mono', monospace;
  color: white;
  font-size: 30px;
  white-space: nowrap;
  user-select: none
}

.shr7 {
  font-size: 20px;
  font-family: 'Roboto Mono', monospace;
  left: 100px;
  color: white;
  left: 49%;
  padding-left: 5px;
  user-select: none
}

.allcont {
  display: grid;
  grid-template-columns: repeat(25, 1fr);
  gap: 10px;
  padding-left: 5px;
}

.theLeftSide {
  width: 190px;
  display: block;
  height: 100vh;
  background-color: #2f2f2f;
  border-right: 6px solid #464646;
  overflow-y: auto;
  overflow-x: hidden;
}

.theul {
  background-color: #2f2f2f;
  color: white;
  width: 150px;
  margin-bottom: 0px;
  font-family: 'Roboto Mono', monospace;
  border-right: solid 6px #464646;
  display: block;
}

li {
  font-family: 'Roboto Mono', monospace;
  font-size: 15px;
  color: white;
  user-select: none;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #2a2a2a;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #252525;
}
<!DOCTYPE html>
<html id="htm" style="font-family: 'Roboto Mono', monospace; user-select: none;">

<head>
  <meta charset="utf-8">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&display=swap" rel="stylesheet">
  <link rel="shortcut icon" type="image/png" href="icons\icon.png">
  <link rel="stylesheet" type="text/css" href="aimcss.css">


  <div class="btndiv"><button id="btn" class="btn"><b>Click me</b></button></div>

  <div id="theLeftSide" class="theLeftSide">
    <div id="pxs" class="sizes div">+ 10px</div>
    <div id="pxs" class="sizes div">- 10px</div>

    <div class="allcont">
      <p id="score" class="score">score:
        <p id="scr" class="score">0</p>
      </p>
      <title>Aim trainer</title>

    </div>

    <div class="allcont">
      <p id="misses" class="score">misses:
        <p id="mis" class="score">0</p>
      </p>
    </div>

    <br onscroll="func()">

    <div class="allcont" id="bestdiv">
      <p class="score">Best:
        <p class="score" id="best">0</p>
      </p>
    </div>

    <br>

    <div style=" padding-left: 5px;"><button style="height: 30px; width: 70px; font-size: 15px; font-family: 'Roboto Mono', monospace;" id="reset"><b>RESET</b></button></div>

    <br><br>

    <p type="inherit" class="shr7">• Score-Misses</p>

    <ol start="1" id='10sec' class='theul'>
      <li style="display: none;" class="lists"><span class="cntrspn">0</span>-0</li>
    </ol>

  </div>


</head>


<body id="bod" style="background-color: #181818;">




  <script type="text/javascript" src="aimscript.js">
  </script>

</body>

</html>
1
callmenikk 15 Сен 2021 в 17:36