Javascript проверка нажатия кнопок

JavaScript: Информация О Нажатой Клавише 👇🏽

В данной статье рассмотрим, как получить информацию о нажатой клавише клавиатуры или кнопки мыши, а также как выполнять необходимые действия (нужный код) при нажатии определенных сочетаний клавиш или кнопок (правый/левый клик мыши).

Чтобы получить информацию, о том какая кнопка клавиатуры нажимается в данный момент, воспользуемся следующим кодом:

function keyPress(e) < let keyNum; if (window.event) < keyNum = window.event.keyCode; >else if (e) < keyNum = e.which; >console.log(keyNum); > document.onkeydown = keyPress;

Номер кнопки находится в переменной keyNum

Узнать keyCode кнопки можете здесь:

Выполнение кода в зависимости от нажатой клавиши

Давайте теперь будем выполнять необходимые действия в зависимости от нажатой клавиши

Для этой задачи воспользуемся оператором switch .

В конструкции case укажите номер кнопки, для которой будет выполнен необходимый код.

document.onkeydown = function (e) < switch (e.keyCode) < case 49: console.log("Нажата единица"); break; case 50: console.log("Нажата двойка"); break; case 32: console.log("Нажат пробел"); break; case 9: console.log("Нажат tab"); break; case 16: console.log("Нажат shift"); break; default: console.log(e.keyCode); >>;

Вместо console.log выполняйте необходимые действия.

Если была нажата клавиша, которой нет в списке, то для неё можете выполнить другой код. Писать в default.

Как отследить комбинации нажатых клавиш

Отследить нажатие CTRL, SHIFT и ALT можно также другими способами (данный способ необходим чтобы отследить комбинации).

Например, отследить нажатие CTRL можно следующим образом:

document.addEventListener("keydown", function (e) < if (e.ctrlKey) < console.log("Был нажат CTRL"); document.getElementById("btnClick").textContent = "CTRL"; >>);

Используя всю ранее полученную информацию, определим нажатую комбинацию клавиш, например, CTRL + F5 :

document.addEventListener("keydown", function (e) < e.preventDefault(); if (e.ctrlKey && event.key == "F5") < console.log("Была нажата комбинация клавиш CTRL + F5"); >>);

Как вы могли заметить, обращаться к клавишам в JavaScript можно несколькими способами. Например, следующие строки кода позволяют нам получить один и тот же результат:

event.key == "F5" аналогично e.keyCode == 116 

Мы рассмотрели, как получить информацию о нажатой клавише на клавиатуре. Теперь давайте рассмотрим, как обработать события мыши.

Информация о нажатой кнопке мыши JavaScript

Рассмотрим, как определить какая кнопка мыши нажимается над объектом: левая кнопка, правая или дабл клик.

Выполнение кода при клике левой кнопкой мыши:

document.querySelector(selector).onclick = function (e) < if (e.which == 1) < console.log("Нажата левая кнопка мыши"); >>

Выполнение кода при клике правой кнопкой мыши:

document.querySelector(selector).oncontextmenu = function (e)

Выполнение кода при двойном клике по кнопке:

document.querySelector(selector).ondblclick = function ()

Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.

Статьи из данной категории:

Источник

Javascript проверка нажатия кнопок

Last updated: Jan 12, 2023
Reading time · 2 min

# Check if Element was Clicked using JavaScript

To check if an element was clicked, add a click event listener to the element.

The click event is dispatched every time the element is clicked.

Here is the HTML for the examples.

Copied! 
DOCTYPE html> html lang="en"> head> title>bobbyhadz.comtitle> meta charset="UTF-8" /> head> body> button id="btn" style="width: 100px; height: 100px"> Click me button> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
const button = document.getElementById('btn'); button.addEventListener('click', function handleClick()  console.log('element clicked'); >); 

We added a click event listener to the button element.

# Check if an element has already been clicked before

If you need to detect if an element has already been clicked before, declare a variable in the outer scope and keep track of its value.

Copied! 
const button = document.getElementById('btn'); let elementClicked = false; button.addEventListener('click', function handleClick()  console.log('element clicked'); if (elementClicked)  console.log('button has already been clicked before'); > elementClicked = true; >); 

We declared the elementClicked variable and initialized its value to false .

# Only allow for the button to be clicked a single time

You can use this approach to only run the handleClick function the first time you click the element.

Copied! 
const button = document.getElementById('btn'); let elementClicked = false; button.addEventListener('click', function handleClick()  if (elementClicked)  return; > console.log('element clicked'); elementClicked = true; >); 

Once the handleClick function gets invoked, the value of the elementClicked variable is set to true .

On the next invocation of the function, we check if the value of the variable is truthy and return straight away.

If you try the example above, you will only see the element clicked message logged once to your console.

Note that you can add a click event listener to any type of element, it doesn’t have to be a button.

# Periodically check if an element has been clicked

You can also use the setInterval method to periodically check if an element has been clicked.

Copied! 
const button = document.getElementById('btn'); let elementClicked = false; button.addEventListener('click', function handleClick()  console.log('element clicked'); elementClicked = true; >); setInterval(() =>  if (elementClicked)  console.log('element was clicked'); > else  console.log("element hasn't been clicked yet"); > >, 1500); // 👉️ invoke every 1500 milliseconds 

The function we passed to the setInterval method runs every 1.5 seconds and checks if the element has been clicked or not.

However, note that it is more efficient to use specific events, like click that only get dispatched when the element gets clicked.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

Источник

Check Whether a Button Is Clicked by JavaScript

1. Use onclick HTML Attribute to Check Button Click in JavaScript
2. Use onclick as JavaScript Method
3. Use addEventListener Method to Check Button Clicks

In JavaScript, the onclick method and the addEventListener are the most common way to manipulate an action.

We will use onclick as an HTML attribute to check if the button is clicked. Again, we will continue the check with the onclick method by manipulating the DOM, and later we will see the use of the addEventListener to understand if the button click is working or not.

Use onclick HTML Attribute to Check Button Click in JavaScript

For this instance, we will take a button tag element and add the attribute onclick .

The attribute will have a function called whenever the button is clicked. Though onclick is fully a JavaScript method, as an HTML attribute, it is pretty common to use for triggering a specified function on click event.

 html> head>  meta charset="utf-8">  meta name="viewport" content="width=device-width">  title>Testtitle>  style>  button  background: gray;  outline: none;  border: none;  padding: 10px;  border-radius: 3px;  color: white;  cursor: pointer;  >  style>  head> body>  button id="btn" onclick="clicked()">Click herebutton>  script>  const btn = document.getElementById('btn');  function clicked()  btn.style.background = "purple";  console.log("CLICKED");  >  script>  body>  html> 

In this example, the function clicked() has a code body that changes the style background from gray to purple whenever the button is clicked.

Use onclick as JavaScript Method

onclick in JavaScript focuses on only one event to call the callback function. This method also emphasizes executing a function body that is declared after the initiation of the method.

But first, the onclick method requires an object to be followed. The HTML element’s querySelector defines the object here.

 html> head>  meta charset="utf-8">  meta name="viewport" content="width=device-width">  title>Testtitle>  style>  button  background: gray;  outline: none;  border: none;  padding: 10px;  border-radius: 3px;  color: white;  cursor: pointer;  >  style>  head> body>  button id="btn">Click herebutton>  script>  const btn = document.getElementById('btn');  btn.onclick = function()  btn.style.color = "yellow";  console.log("CLICKED!");  >  script>  body>  html> 

Here, the occurrence of the click event outputs in the console as CLICKED! and the button style also gets to change its font color from white to yellow. The btn.onclick method sets off to run the corresponding function, and thus the change after the click is visualized.

Use addEventListener Method to Check Button Clicks

Usually, the addEventListener method is not supported by the older browsers, but it can punch on multiple events.

Here, we will use one event, click , and the function that the event will handle will fire the button to change. Also, we will print something in the console panel to be more sure about the event activity.

 html> head>  meta charset="utf-8">  meta name="viewport" content="width=device-width">  title>Testtitle>  style>  input  background: gray;  outline: none;  border: none;  padding: 10px;  border-radius: 3px;  color: white;  cursor: pointer;  >  p  background: white;  color: gray;  >  style>  head> body>  input type="button" id="btn" value="Click Here">  p id="after">p>  script>  const btn = document.getElementById('btn');  function getItDone()  document.getElementById('after').innerHTML = "I am clicked."  console.log("CLICKED!");  >  btn.addEventListener('click', getItDone);  script>  body>  html> 

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

Related Article — JavaScript Button

Related Article — JavaScript EventListener

Copyright © 2023. All right reserved

Источник