I have a button and I only want it to be pressed with a left click not enter key-CodePudding

I have a button in my site which is a simple aim trainer and you should click the button with left click. Everything works like a charm but if you click the button and hold it, then you hold enter, you can click 303 times in 10secs and that is cheating. I want it to only be pressed with left click. Explain your answer please.

Link to the site: 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>

CodePudding user response：

I recommend checking the event.pointerId variable when the click occurs.

b.addEventListener('click', change);

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

When the mouse is used, the pointerId should be non-negative. When the keyboard is used to "click," the ID will be -1.

CodePudding user response：

If I understand correctly, you want to stop an edge case where users can hold down enter and the left mouse button as they will keep scoring.

I would recommend listening for the enter key using the keydown and keyup events to track when enter is pressed then using the state to disable any logic while it is pressed.


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

then just use isEnterPressed to block any logic triggered by clicking.

This is just a simple example, you could generalize this to track any keyboard input

CodePudding user response：

You can use keypress listener on the button and preventDefault() when the enter triggers on the button priventDefault() will stop that

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>