Как узнать, когда элемент DOM перемещается или изменяется - PullRequest
26 голосов
/ 10 августа 2010

Я хотел бы знать, есть ли событие DOM для прослушивания, которое сообщает мне, когда элемент DOM перемещается, перемещается или изменяется на странице.Я не говорю об элементах, которые перетаскивают.Например, если у меня есть список из трех элементов на странице, и я использую JS, чтобы удалить один из двух верхних элементов списка со страницы (или скрыть его или что-то еще), я хотел бы прикрепить обработчик для запуска, когдатретий элемент списка перемещается вверх по странице.

Я использую jQuery, поэтому приемлемы простые ответы javascript или jQuery.

Возможно, в элементе нет событий move / position / resize.уровень, так что если есть событие уровня страницы / документа, которое сообщит мне, что страница была перекрашена, и я могу проверить, нужно ли мне снова вызывать функцию?

Фон

Я поместил прозрачный элемент div над элементом, пока выполняется вызов веб-службы для удаления этого элемента.Так как мне нужно абсолютно позиционировать этот оверлейный div, я хочу, чтобы он отслеживал элемент, который он охватывает изначально.По сути, привязка к базовому элементу.

Ответы [ 3 ]

15 голосов
/ 23 мая 2013

Я не думаю, что это решение будет актуальным после столь длительного времени, но есть отличное кросс-браузерное решение, основанное на событиях переполнения и недостаточного заполнения здесь

* 1005включив нашу магию прослушивания изменения размера, мы вводим элемент объекта в целевой элемент, устанавливаем список специальных стилей, чтобы скрыть его из поля зрения, и отслеживаем его на предмет изменения размера - он действует как триггер для оповещения нас об изменении размера родительского элемента.

Содержимое элемента <object> имеет собственное событие resize, как окно.

12 голосов
/ 10 августа 2010

Вы не можете получить обратный вызов для перемещения / изменения размера элемента в целом; вам придется постоянно проверять размеры в интервальном опросчике, что сделает его менее адаптивным. Вы можете улучшить это, вызвав средство проверки для события окна resizescroll, если происходит переполнение или фиксированное позиционирование. Вы также можете добавить прослушиватели DOM Mutation Event, чтобы получать информацию об удалении элементов из дерева документа, но это работает не во всех браузерах.

Не можете ли вы сделать оверлей с простым CSS? например. поместите position: relative на скрываемый элемент, затем добавьте наложение внутри него со следующим?

position: absolute;
z-index: 10;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.5;
4 голосов
/ 10 августа 2010

Для этого есть плагин (Бен Алман). TM

Это хороший плагин, хотя я предлагаю использовать его экономно (т.е. не слишкоммного элементов), чтобы уменьшить количество опроса.

...