Создание и удаление обёртки элемента по клику или при потере фокуса

@scivola · Регистрация: 22.05.2018

Студворк — интернет-сервис помощи студентам

Здравствуйте, коллеги!
Хотелось бы, чтобы кто-нибудь показал и объяснил, как можно создать обёртку элемента по клику на нём и её удаление по очередному клику на этом же элементе или при потере фокуса им. И при этом созданная обёртка должна иметь такое же свойство display, как и элемент; элементы в html-документе разные и могут повторяться.

Qwerty_Wasd · 31.01.2019, 12:12

scivola, как один из кучи вариантов - https://codepen.io/qwerty_wasd/pen/Nodvzw
добавил бордеры и паддинг элементу и обертке для наглядности

JavaScript
1
2
3
4
5
6
document.querySelector(`.element`)
  .addEventListener(`click`, e => !e.currentTarget.parentElement.classList.contains(`wrapper`) ?
                    (e.currentTarget.insertAdjacentHTML(`beforebegin`, `<div class='wrapper' style='display: ${getComputedStyle(e.currentTarget).display}; padding: ${getComputedStyle(e.currentTarget).padding}; border: ${getComputedStyle(e.currentTarget).border};'></div>`),
                     e.currentTarget.previousElementSibling.appendChild(e.currentTarget)) :
                    (e.currentTarget.parentElement.parentElement.insertBefore(e.currentTarget,e.currentTarget.parentElement),
                     e.currentTarget.nextElementSibling.remove()));

@scivola · 31.01.2019, 13:00 **[ТС]**

Qwerty_Wasd, спасибо за ответ! А как можно реализовать, чтобы обёртка создавалась на любом элементе, а не только на первом? И как удалить обёртку, если элемент теряет фокус (курсором кликаем на другом элементе)?

Qwerty_Wasd · 31.01.2019, 13:17

scivola, давайте проясним для начала - любой элемент.... на странице? в определенном блоке?
Ведь

Сообщение от scivola

И как удалить обёртку, если элемент теряет фокус (курсором кликаем на другом

это обход всех targets на наличие обертки. Вы представляете, что будет если если начать обходить каждый элемент на странице?
Может все-таки у целей есть родитель, которым можно ограничиться? Это существенно снизит нагрузку.
Далее... а почему собственно такая реализация? В чем задача состоит? В выделении фокус-элемента? Необязательно же расширять дерево. Достаточно других вариантов.

Еще безболезненный вариант, это маркировка фокус-элементов. Скажем уникальный класс. Тогда можно будет, повесить один обработчик и ловить цели на всплытие события.
Что-то типа - https://codepen.io/qwerty_wasd/pen/WPRXzr

JavaScript
1
2
3
4
5
6
7
8
9
document.body.addEventListener(`click`, e => {
  if (e.target.classList.contains(`element`)) {
    !e.target.parentElement.classList.contains(`wrapper`) ?
      (e.target.insertAdjacentHTML(`beforebegin`, `<div class='wrapper' style='display: ${getComputedStyle(e.target).display}; padding: ${getComputedStyle(e.target).padding}; border: ${getComputedStyle(e.target).border};'></div>`),
       e.target.previousElementSibling.appendChild(e.target)) :
    (e.target.parentElement.parentElement.insertBefore(e.target,e.target.parentElement),
     e.target.nextElementSibling.remove())
  }
});

HTML5
1
2
3
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>

@scivola · 31.01.2019, 13:27 **[ТС]**

Qwerty_Wasd, цель всего этого - познание JS, как бы высокопарно это не звучало

Если честно, то стало интересно, каким образом можно сделать блочную модель, которая находится в инструментах разработчика на месте в html.

@scivola · 31.01.2019, 13:33 **[ТС]**

Сообщение от Qwerty_Wasd

scivola Еще безболезненный вариант, это маркировка фокус-элементов. Скажем уникальный класс. Тогда можно будет, повесить один обработчик и ловить цели на всплытие события.

Я тоже об этом думал. Каждому элементу присвоить одинаковый класс и по нему отлавливать события.

Qwerty_Wasd · 31.01.2019, 13:46

scivola,

Сообщение от scivola

Каждому элементу присвоить одинаковый класс и по нему отлавливать события.

лучше так и поступить - https://codepen.io/qwerty_wasd/pen/WPRXzr

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
document.body.addEventListener(`click`, e => 
  e.target.classList.contains(`element`) ?
    (!e.target.parentElement.classList.contains(`wrapper`) ?
      (Array.from(document.getElementsByClassName(`element`), fe => {
      if (fe.parentElement.classList.contains(`wrapper`)) {
        fe.parentElement.parentElement.insertBefore(fe,fe.parentElement);
        fe.nextElementSibling.remove();
      }
    }),
       e.target.insertAdjacentHTML(`beforebegin`, `<div class='wrapper' style='display: ${getComputedStyle(e.target).display}; padding: ${getComputedStyle(e.target).padding}; border: ${getComputedStyle(e.target).border};'></div>`),
       e.target.previousElementSibling.appendChild(e.target)) :
    (e.target.parentElement.parentElement.insertBefore(e.target,e.target.parentElement),
     e.target.nextElementSibling.remove())) :
    Array.from(document.getElementsByClassName(`element`), fe => {
      if (fe.parentElement.classList.contains(`wrapper`)) {
        fe.parentElement.parentElement.insertBefore(fe,fe.parentElement);
        fe.nextElementSibling.remove();
 }}));

HTML5
1
2
3
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
*,
*:after,
*:before {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
}
 
/*стили выше добавлены только для этого примера, в реальном проекте используйте normalize.css\reset.css*/
html,
body {
  height: 100%;
  width: 100%;
}
 
.element {
  display: inline-block;
  border: 2px solid #000000;
  padding: 20px;
}

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .

@scivola 81 / 49 / 34 Регистрация: 22.05.2018 Сообщений: 192

	Создание и удаление обёртки элемента по клику или при потере фокуса 31.01.2019, 11:04. Показов 2478. Ответов 6 Метки css3, html 5 (Все метки) Здравствуйте, коллеги! Хотелось бы, чтобы кто-нибудь показал и объяснил, как можно создать обёртку элемента по клику на нём и её удаление по очередному клику на этом же элементе или при потере фокуса им. И при этом созданная обёртка должна иметь такое же свойство display, как и элемент; элементы в html-документе разные и могут повторяться. 0

@scivola 81 / 49 / 34 Регистрация: 22.05.2018 Сообщений: 192
	31.01.2019, 13:00 [ТС]
	Qwerty_Wasd, спасибо за ответ! А как можно реализовать, чтобы обёртка создавалась на любом элементе, а не только на первом? И как удалить обёртку, если элемент теряет фокус (курсором кликаем на другом элементе)? 0

@scivola 81 / 49 / 34 Регистрация: 22.05.2018 Сообщений: 192
	31.01.2019, 13:27 [ТС]
	Qwerty_Wasd, цель всего этого - познание JS, как бы высокопарно это не звучало Если честно, то стало интересно, каким образом можно сделать блочную модель, которая находится в инструментах разработчика на месте в html. Изображения 0

Создание и удаление обёртки элемента по клику или при потере фокуса

Решение