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 може бути залежною від швидкості подвійного клацання, яку користувач встановив у налаштуваннях операційної системи. Це означає, що один і той самий подвійний клік може бути розпізнаний по-різному на різних пристроях або в різних браузерах.
| Порада: | Використовуйте подію |
| Порада: | Не зловживайте подією |
| Порада: | Пам'ятайте, що подія |
Синтаксис
element.addEventListener('dblclick', function(event) {
// Ваш код тут
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
У цьому прикладі користувач може додавати нові елементи до списку за допомогою текстового поля і кнопки "Додати". При подвійному кліку на існуючому елементі списку він стає редагованим, що дозволяє змінювати текст безпосередньо. Цей приклад ілюструє використання події dblclick для забезпечення зручної і швидкої функції редагування в інтерактивному списку, що покращує користувацький досвід.
У цьому прикладі, коли користувач двічі клацає на абзаці, текст абзацу замінюється текстовим полем, яке дозволяє редагувати вміст. Після втрати фокусу (blur) редагований текст зберігається назад в абзац. Це корисно для створення редагованих вмістів без необхідності переходити до окремої сторінки або форми.
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();
});У цьому прикладі, коли користувач двічі клацає на елементі з ідентифікатором resizableBox, його ширина збільшується на 50%. Це може бути корисним для інтерактивних компонентів на сторінці, де потрібна зміна розміру або масштабування, наприклад, для збільшення зображення чи блоку тексту для кращої видимості.
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('Розмір елемента збільшено при подвійному кліку.');
});