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

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

Властивість shiftKey об'єкта MouseEvent повертає булеве значення (true або false), яке вказує, чи була натиснута клавіша "Shift" під час виконання події миші (наприклад, click, mousemove або mousedown). Це дозволяє створювати різноманітну поведінку для елементів на сторінці залежно від того, чи утримується "Shift". Наприклад, можна змінювати спосіб виділення елементів або надавати додаткові можливості при взаємодії з елементами на сторінці.

Робота з shiftKey досить проста: коли користувач викликає подію миші, ви можете перевірити, чи утримував він клавішу "Shift". Якщо так, то можна виконати альтернативну дію, яка відрізняється від звичайної взаємодії. Наприклад, користувач може виконати спеціальну команду, перетягуючи елемент з натиснутою клавішею "Shift", або змінити напрямок анімації.

Приклад використання:

document.addEventListener('click', function(event) {
    if (event.shiftKey) {
        console.log('Клавіша Shift була натиснута!');
    } else {
        console.log('Клавіша Shift не була натиснута.');
    }
});

У цьому прикладі при кожному кліку перевіряється, чи була натиснута клавіша "Shift", і виводиться відповідне повідомлення в консоль. Це дозволяє додавати гнучкішу логіку до дій користувача.

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

правити

Порада

Не варто перевіряти лише наявність події миші, краще одразу обробляти стан клавіші "Shift". Це дасть можливість уникнути зайвих дій і точніше контролювати події.

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

Порада

Для відстеження тривалих дій, таких як перетягування елементів, можна перевіряти shiftKey у подіях mousedown або mousemove. Це дозволить додати спеціальні функції, які будуть активовані, якщо "Shift" натиснутий під час переміщення миші.

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

Порада

Спробуйте застосовувати shiftKey у комбінації з різними подіями миші для створення багатого інтерфейсу. Наприклад, поєднуйте кліки, перетягування та подвійні кліки з утриманням "Shift" для різних сценаріїв.

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

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

Синтаксис

event.shiftKey

Переглядачі

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

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

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

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

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

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

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

Приклади

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

<header>
  <h2 class="title">MouseEvent -> shiftKey</h2>
  <p class="description">Відстежує, чи натиснута клавіша "Shift" для активації режиму малювання прямокутників.</p>
</header>
<main>
  <div class="result">
    <p>Натисніть і утримуйте клавішу "Shift", а потім клікайте, щоб малювати прямокутники.</p>
    <div class="drawing-area"></div>
  </div>
</main>

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

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  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;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

.drawing-area {
  width: 100%;
  height: 500px;
  background-color: #eef;
  position: relative;
  border: 2px solid #ccc;
}

.rectangle {
  position: absolute;
  background-color: red;
  width: 50px;
  height: 50px;
}

const drawingArea = document.querySelector('.drawing-area');

drawingArea.addEventListener('click', function (event) {
  // Перевіряємо, чи була натиснута клавіша Shift
  if (event.shiftKey) {
    // Створюємо новий елемент - прямокутник
    const rectangle = document.createElement('div');
    rectangle.classList.add('rectangle');

    // Встановлюємо позицію прямокутника за координатами кліку
    rectangle.style.left = `${event.offsetX - 25}px`; // Віднімання половини ширини прямокутника для центрування
    rectangle.style.top = `${event.offsetY - 25}px`; // Віднімання половини висоти

    // Додаємо новий елемент до області малювання
    drawingArea.appendChild(rectangle);
  } else {
    console.log('Клавіша Shift не була натиснута, малювання не активовано.');
  }
});
//# sourceURL=pen.js

let selectionMode = false;

document.addEventListener('mousedown', function(event) {
    if (event.shiftKey) {
        selectionMode = !selectionMode;
        console.log('Режим виділення:', selectionMode ? 'ввімкнено' : 'вимкнено');
    }
});

document.addEventListener('mousemove', function(event) {
    if (selectionMode) {
        console.log('Виділення елементів...');
    }
});

document.addEventListener('mousemove', function(event) {
    if (event.shiftKey) {
        document.body.style.backgroundColor = 'lightblue';
    } else {
        document.body.style.backgroundColor = 'white';
    }
});