JS властивість Event.ctrlKey (Mouse)

Загальний опис

ctrlKey — це властивість об'єкта MouseEvent, яка повертає булеве значення, що вказує, чи була натиснута клавіша "Ctrl" під час події миші. Вона використовується для обробки подій, коли важливо знати, чи користувач тримав натиснутою клавішу "Ctrl", наприклад, для виконання спеціальних функцій або для додаткового керування.

Це особливо корисно для створення комбінацій миші та клавіатури, коли натискання клавіші "Ctrl" під час кліку змінює дію або додає іншу функціональність. Наприклад, багато додатків використовують комбінації, де "Ctrl" + "Click" виконує дію, відмінну від звичайного кліку. Властивість ctrlKey повертає true, якщо "Ctrl" була натиснута, і false в іншому випадку.

document.addEventListener('click', function(event) {
    if (event.ctrlKey) {
        console.log("Натиснута клавіша Ctrl під час кліку!");
    }
});

Залежно від ваших потреб, ctrlKey можна використовувати разом з іншими властивостями MouseEvent, такими як shiftKey, altKey або metaKey, щоб створити складні комбінації, котрі відповідають конкретним взаємодіям користувача. Це також допомагає уникнути конфліктів з інтерфейсами, де звичайний клік може мати одне призначення, а клік з "Ctrl" – інше. Зазвичай властивість ctrlKey використовується з подіями click, dblclick, mousedown та mouseup.

правити

Порада

Для запобігання конфліктам з інтерфейсом користувача або іншими комбінаціями, використовуйте event.preventDefault(), щоб скасувати дію за замовчуванням, якщо вона заважає обробці вашої комбінації.

автор: Bond правити

Порада

Якщо створюєте власні комбінації для обробки подій, враховуйте, що ctrlKey часто використовується в стандартних комбінаціях браузера (як, наприклад, "Ctrl + C" або "Ctrl + V"). Це може спричинити конфлікти, тому слід вибирати не зайняті комбінації.

автор: Bond правити

Порада

Для великих проєктів можна створити об'єкт з усіма комбінаціями, які ви використовуєте, щоб легко змінювати їх у майбутньому. Це забезпечить легкість у підтримці й масштабуванні коду.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

event.ctrlKey

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1.5	1	12.1	12

Підтримка: мобільні переглядачі

Переглядач
	37	18	4	1

Підтримка: серверні переглядачі

Переглядач
	-	-

Приклади

+ запропонувати свій приклад у пісочниці

<header>
  <h2 class="title">MouseEvent -> ctrlKey</h2>
  <p class="description">Визначає, чи була натиснута клавіша "Ctrl" під час події миші.</p>
</header>
<main>
  <div class="controls">
    <form>
      <label>
        <input type="radio" name="color" value="lightblue" checked> Блакитний
      </label>
      <label>
        <input type="radio" name="color" value="lightgreen"> Зелений
      </label>
      <label>
        <input type="radio" name="color" value="lightcoral"> Корал
      </label>
    </form>
  </div>
  <div class="result" id="colorBox">
    <p>Натисніть Ctrl + Клік для зміни кольору</p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.controls {
  margin-bottom: 15px;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

document.getElementById('colorBox').addEventListener('click', function (event) {
  // Перевіряємо, чи була натиснута клавіша Ctrl під час кліку
  if (event.ctrlKey) {
    // Вибираємо активний колір з радіо-кнопок
    let selectedColor = document.querySelector('input[name="color"]:checked').value;
    // Змінюємо фон кольорового блоку
    event.currentTarget.style.backgroundColor = selectedColor;
  } else {
    alert("Щоб змінити колір, утримуйте клавішу Ctrl під час кліку.");
  }
});
//# sourceURL=pen.js

<div id="indicator">Демонстраційний елемент</div>

document.addEventListener('mousemove', function(event) {
    if (event.ctrlKey) {
        let indicator = document.getElementById('indicator');
        indicator.style.left = event.clientX + 'px';
        indicator.style.top = event.clientY + 'px';
    }
});

document.addEventListener('mousedown', function(event) {
    if (event.ctrlKey && event.button === 2) { // Правий клік з Ctrl
        console.log("Спеціальне меню викликано правою кнопкою миші з Ctrl");
    }
});