getBoundingClientRect () возвращает ноль в XUL - PullRequest
Новая
       18

getBoundingClientRect () возвращает ноль в XUL

9 голосов
/ 02 января 2011

У меня проблема с расширением Firefox

У меня есть всплывающая панель XUL с hbox для облака тегов и код JS для добавления div к этому hbox: 

<hbox id="tag_base" ondblclick="alert('done')"/>

JS: 

var root = document.getElementById('tag_base');
var tag = document.createElement('div');
tag.textContent = 'test';
root.appendChild(tag);
var rect = tag.getBoundingClientRect()
alert(rect.top)

Мне нужно получить размеры каждого добавленного div, однако getBoundingClientRect просто отказывается работать. Если я удаляю оповещения, это всегда ноль. С оповещениями история другая: При первом вызове оповещения оно возвращает ноль, хотя на экране появляется div. Любые последующие предупреждения возвращают правильные координаты.

Если я установлю точку останова в Chromebug, все сообщается правильно. Если я не прерываю выполнение каким-либо образом и не запускаю цикл, возвращаются только нули.

Это меня совсем запутало. Вызов «boxObject» дает те же результаты, в то время как «getClientRects [0]» не определен при первом вызове.

Будем весьма благодарны за любые подсказки о том, что может быть причиной этого.

Ответы [ 3 ]

21 голосов
/ 17 января 2013

Примечание: Внимание, если вы используете getBoundingClientRect с элементом, который имеет display: none, тогда он вернет 0, где угодно в dom.

3 голосов
/ 03 января 2011

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

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

Этот процесс перекомпоновки не запускается синхронно после любого изменения в DOM, в противном случае код, такой как 

elt.style.top = "5px";
elt.style.left = "15px";

обновит макет дважды, что неэффективно.

С другой стороны, запрос позиции / размера элементов (по крайней мере через .offsetTop) должен заставить макет возвращать правильную информацию. Это не происходит в вашем случае по какой-то причине, и я не уверен, почему.

Пожалуйста, создайте простой тестовый пример, демонстрирующий проблему, и отправьте сообщение об ошибке на bugzilla.mozilla.org (CC me - asqueella@gmail.com).

Я предполагаю, что это связано с макетом XUL, который менее надежен, чем HTML; Вы можете попробовать создать облако в HTML-документе в iframe или, по крайней мере, в , используя createElementNS для создания реальных элементов HTML вместо xul: div , который вы создаете с помощью текущего кода.

1 голос
/ 21 декабря 2017

Убедитесь, что DOM готов. В моем случае, даже при использовании функции getBoundingClientRect для событий щелчка.Привязка событий должна была произойти, когда DOM будет готов.

...