JS властивість Event.dblclick

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

dblclick — це подія, яка спрацьовує, коли користувач двічі клацає лівою кнопкою миші на елементі. Ця подія часто використовується для надання користувачам швидкого доступу до функцій, які можна активувати подвоєним клацанням. Наприклад, в текстовому редакторі двоклік може виділити слово, а в файловій системі — відкрити папку або файл. Подія dblclick є зручною для створення інтерактивних елементів на веб-сторінках, таких як редактори, таблиці даних, діаграми та інші інструменти, які вимагають інтенсивної взаємодії користувача.

Щоб використовувати подію dblclick, необхідно додати обробник подій до елемента, який повинен реагувати на подвійний клік. Обробник подій може виконувати будь-яку необхідну логіку, наприклад, змінювати стан елемента, відправляти дані на сервер або відображати додаткові елементи інтерфейсу. Наприклад:

const box = document.getElementById('box');

box.addEventListener('dblclick', function(event) {
  box.style.backgroundColor = 'yellow';
  console.log('Елемент був двічі клацнутий!');
});

У цьому прикладі, коли користувач двічі клацає на елемент з ідентифікатором box, його фоновий колір змінюється на жовтий, а в консолі з'являється повідомлення про те, що елемент був двічі клацнутий.

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

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

правити

Порада

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

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

Порада

Не зловживайте подією dblclick для елементів, які можуть призвести до критичних дій, наприклад, видалення або збереження даних. Завжди додавайте підтвердження або можливість скасування таких дій, щоб уникнути випадкових помилок користувача.

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

Порада

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

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

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

Синтаксис

element.addEventListener('dblclick', function(event) {
  // Ваш код тут
});

Переглядачі

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

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

Переглядач
	66	57	11.1	53	16

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

Переглядач
	66	66	57	11.3

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

Переглядач
	15.0.0	1.0

Приклади

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

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

const paragraph = document.getElementById('editableParagraph');

paragraph.addEventListener('dblclick', function(event) {
  const currentText = event.target.textContent;
  const input = document.createElement('input');
  input.type = 'text';
  input.value = currentText;
  event.target.textContent = '';
  event.target.appendChild(input);

  input.addEventListener('blur', function() {
    event.target.textContent = input.value;
  });

  input.focus();
});

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

const resizableBox = document.getElementById('resizableBox');

resizableBox.addEventListener('dblclick', function(event) {
  const currentWidth = resizableBox.offsetWidth;
  const newWidth = currentWidth * 1.5;
  resizableBox.style.width = `${newWidth}px`;
  console.log('Розмір елемента збільшено при подвійному кліку.');
});