Подія dblclick в JavaScript — подвійне клацання миші
Загальний опис
dblclick — це подія, яка спрацьовує, коли користувач двічі клацає лівою кнопкою миші на елементі. Ця подія часто використовується для надання користувачам швидкого доступу до функцій, які можна активувати подвоєним клацанням. Наприклад, в текстовому редакторі двоклік може виділити слово, а в файловій системі — відкрити папку або файл. Подія dblclick є зручною для створення інтерактивних елементів на веб-сторінках, таких як редактори, таблиці даних, діаграми та інші інструменти, які вимагають інтенсивної взаємодії користувача.
Щоб використовувати подію dblclick, необхідно додати обробник подій до елемента, який повинен реагувати на подвійний клік. Обробник подій може виконувати будь-яку необхідну логіку, наприклад, змінювати стан елемента, відправляти дані на сервер або відображати додаткові елементи інтерфейсу. Наприклад:
const box = document.getElementById('box');
box.addEventListener('dblclick', function(event) {
box.style.backgroundColor = 'yellow';
console.log('Елемент був двічі клацнутий!');
});
У цьому прикладі, коли користувач двічі клацає на елемент з ідентифікатором box, його фоновий колір змінюється на жовтий, а в консолі з'являється повідомлення про те, що елемент був двічі клацнутий.
Подія dblclick може бути особливо корисною в складних інтерфейсах користувача, де є потреба в швидкому доступі до певних функцій. Наприклад, у таблицях з даними двоклік може використовуватися для редагування конкретної комірки, а на інтерактивних картах — для масштабування або відкриття детальної інформації про обраний об'єкт.
Важливо враховувати, що подія dblclick може бути залежною від швидкості подвійного клацання, яку користувач встановив у налаштуваннях операційної системи. Це означає, що один і той самий подвійний клік може бути розпізнаний по-різному на різних пристроях або в різних браузерах.
- Порада
-
Використовуйте подію
автор: Bonddblclickдля швидкого доступу до часто використовуваних функцій, але не робіть їх єдиним способом доступу до важливих дій. Користувачі можуть не завжди знати про існування подвійного клацання як способу взаємодії. - Порада
-
Не зловживайте подією
автор: Bonddblclickдля елементів, які можуть призвести до критичних дій, наприклад, видалення або збереження даних. Завжди додавайте підтвердження або можливість скасування таких дій, щоб уникнути випадкових помилок користувача. - Порада
-
Пам'ятайте, що подія
автор: Bonddblclickзалежить від налаштувань швидкості подвійного клацання миші в операційній системі користувача. Тому перевіряйте, що ваша реалізація працює на різних платформах і пристроях з різними налаштуваннями.
Синтаксис
element.addEventListener('dblclick', function(event) {
// Ваш код тут
});Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 6 | 3 | 11.6 | 12 | 8 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 6 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
У цьому прикладі користувач може додавати нові елементи до списку за допомогою текстового поля і кнопки "Додати". При подвійному кліку на існуючому елементі списку він стає редагованим, що дозволяє змінювати текст безпосередньо. Цей приклад ілюструє використання події dblclick для забезпечення зручної і швидкої функції редагування в інтерактивному списку, що покращує користувацький досвід.
HTML
<header>
<h2 class="title">dblclick (HTML Event)</h2>
<p class="description">Спрацьовує, коли користувач двічі клацає лівою кнопкою миші на елементі.</p>
</header>
<main>
<div class="result">
<ul id="itemList">
<li class="editable">Подвійний клік для редагування цього елемента</li>
<li class="editable">Подвійний клік для редагування цього елемента</li>
</ul>
<input type="text" id="newItem" placeholder="Додати новий елемент">
<button id="addItemButton">Додати</button>
</div>
</main>CSS
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);
}
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 10px;
cursor: pointer;
border-bottom: 1px solid #ddd;
}
li.editable:hover {
background-color: #f0f0f0;
}
input[type="text"] {
padding: 5px;
font-size: 14px;
margin-top: 15px;
width: calc(100% - 22px);
}
button {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
font-size: 16px;
margin-top: 10px;
}
button:hover {
background-color: #0056b3;
}JS
document.addEventListener('DOMContentLoaded', function () {
const itemList = document.getElementById('itemList');
const addItemButton = document.getElementById('addItemButton');
const newItemInput = document.getElementById('newItem');
// Функція для редагування елементу списку при подвійному кліку
itemList.addEventListener('dblclick', function (event) {
if (event.target && event.target.matches('li.editable')) {
const currentText = event.target.textContent;
const input = document.createElement('input');
input.type = 'text';
input.value = currentText;
input.className = 'editInput';
event.target.textContent = '';
event.target.appendChild(input);
input.addEventListener('blur', function () {
event.target.textContent = input.value;
});
input.focus();
}
});
// Функція для додавання нового елементу до списку
addItemButton.addEventListener('click', function () {
const newItemText = newItemInput.value.trim();
if (newItemText !== '') {
const newItem = document.createElement('li');
newItem.textContent = newItemText;
newItem.className = 'editable';
itemList.appendChild(newItem);
newItemInput.value = '';
}
});
// Додавання нового елементу до списку при натисканні клавіші Enter
newItemInput.addEventListener('keypress', function (event) {
if (event.key === 'Enter') {
addItemButton.click();
}
});
});
//# sourceURL=pen.jsУ цьому прикладі, коли користувач двічі клацає на абзаці, текст абзацу замінюється текстовим полем, яке дозволяє редагувати вміст. Після втрати фокусу (blur) редагований текст зберігається назад в абзац. Це корисно для створення редагованих вмістів без необхідності переходити до окремої сторінки або форми.
HTML
<div id="editableParagraph">Демонстраційний елемент</div>JS
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%. Це може бути корисним для інтерактивних компонентів на сторінці, де потрібна зміна розміру або масштабування, наприклад, для збільшення зображення чи блоку тексту для кращої видимості.
HTML
<div id="resizableBox">Демонстраційний елемент</div>JS
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('Розмір елемента збільшено при подвійному кліку.');
});Коментарі
Коментарів ще немає — будьте першим!