Наблюдение: getBoundingClientRect иногда возвращает в свойствах нецелый long

@Inskipp · Регистрация: 27.02.2024

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

Приходится:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
const GetRect = function(ElementId){
 let Element = document.getElementById(ElementId);
 let rect = Element.getBoundingClientRect();
 return {
  Top: Math.round(rect.left), //xPosition
  Left: Math.round(rect.top), //yPosition
  Right: Math.round(rect.right),
  Width: Math.round(rect.width),
  Height: Math.round(rect.height)
 };
};

Обстоятельства:
Больше года не трогал модуль кода, который занимался взаимной привязкой хинтов к кнопкам. Все и так работало. А тут, внезапно, перестало (firefox стал более новый 133.03 (64 bit)).
Монитор: acer lcd monitor s 1191 HQL

Исследовал, и обнаружил, что getBoundingClientRect() начал в своих свойствах возвращать дробные числа width, height. Да и top, left и right, иногда. И, похоже, типа long.
И тут до меня дошло: поменялся монитор. У него очень нестандартное разрешение: 1366х768.
Пришлось кое где вставить в код что-то подобное Math.round(rect.width)

Добавлено через 15 минут
Хочется услышать мнение монстров!

@voraa · 02.02.2025, 21:18

Hint где находится? Кто его родительский элемент? Какие стили у этого родителя?

@Inskipp · 02.02.2025, 21:27 **[ТС]**

HTML5
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
<div class="find-hints-anchor noprint">
 <div class="menu-wrapper">
 <div id="find_hint" class="find-hint callout-balloon">
  ⇪ Кликните, чтобы найти текст на странице
 </div>
 <div id="text_to_find_hint" class="find-hint callout-balloon">
  ⇪ Введите текст, который Вы хотите найти. Допустимы русские буквы (регистр не важен), пробелы и знаки препинания. Недопустимые символы не будут введены.
 </div>
 <div id="clear_find_hint" class="find-hint callout-balloon">
  ⇪ Очистить искомый текст
 </div>
 <div id="find_down_hint" class="find-hint callout-balloon">
  ⇪ Найти текст ниже
 </div>
 <div id="find_up_hint" class="find-hint callout-balloon">
  ⇪ Найти текст выше
 </div>
 <div id="text_selection_hint" class="find-hint callout-balloon">
  ⇪ Что сейчас выделено на странице. Копируется в поле поиска, но недопустимые символы фильтруются. Потом можно будет поискать дргие места с таким текстом.
 </div>
 <div id="to_found_hint" class="find-hint callout-balloon">
  ⇪ Переместиться к выделенному
 </div>
 </div>
</div>

Вот эти два хинта не показываются: "text_to_find_hint" и "text_selection_hint"

Добавлено через 7 минут
voraa, Что-то с местным интерфесом. Могу я маленький zip с тестовым примером кинуть как-то? Почтой, чтоли...

@voraa · 02.02.2025, 21:31

В devtoolse можно посмотреть, куда именно уезжает ваш hint.
Когда вы делаете getBoundingClientRect, он дает координаты left и top относительно левого верхнего угла окна,не относительно документа или родителя. (Если сделать роллинг страницы, то координаты, left и top будут уже другие т.к. элемент сдвинется относительно окна.
А когда вы указываете style.left и style.top вы указываете координаты относительно левого верхнего угла его родителя (если hint имеет position absolute или смещение от того места, где он должен бы был находиться, если position relative

Добавлено через 59 секунд

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

Могу я маленький zip с тестовым примером кинуть как-то? Почтой, чтоли...

Маленький zip (до 25Мб) можно и тут кинуть.

@Inskipp · 02.02.2025, 21:32 **[ТС]**

Вот rar

@voraa · 02.02.2025, 21:34

И чего там запускать и смотреть?

@Inskipp · 02.02.2025, 21:40 **[ТС]**

Это, в общем-то, тестовый фрагмент. Запускать "TestNotepad 11.html"

@voraa · 02.02.2025, 21:49

Ну а чего смотреть то? Когда и где эти хинты должны появляться? Какая функция из какого файла их должна показывать?
Я как бы свой магический кристалл в полировку сдал. А без него - никак.

@Inskipp · 02.02.2025, 22:00 **[ТС]**

В принципе, он был полностью рабочим, пока не начались проблемы с хинтами...

Добавлено через 1 минуту
И не надо критиковать найденный там алгоритм контекстного поиска - он еще сырой...

Добавлено через 3 минуты
voraa,

Ну а чего смотреть то?

Мышой сверху по меню поводи, увидишь: не везде хинты появляются...

@voraa · 02.02.2025, 23:29

Очень загадочная функция EventIsInside. Как я понял, она возвращает true, когда мышь приходит с какого то элемента внутри кнопки. Там span с картинкой. Вот когда с него снова на кнопку мышь приходит, тогда и true. Тогда и хинт появляется. Но у input нет внутреннего элемента. Эта функция возвращает false, когда мышь извне приходит на input, а больше событие mouseover и не возникает.
Переусложненный алгоритм.
Проще использовать события mouseenter и mouseleave. Мышь пришла - мышь ушла. и все. А откуда пришла, куда ушла - не важно.

Кстати, большой недостаток. Положения хинтов вычисляются один раз в самом начале. Если в процессе просмотра изменяется размер окна браузера - они съезжают. Вычислять надо каждый раз перед показом.

Добавлено через 53 минуты

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

И не надо критиковать найденный там алгоритм контекстного поиска - он еще сырой...

Вспомнил, что у нас на работе один коллега когда то брал поиск отсюда
https://www.seabreezecomputers.com/tips/find.htm
Ну разумеется его стилизовали под себя и лишнее выкидывали

@Inskipp · 03.02.2025, 08:24 **[ТС]**

voraa,

Проще использовать события mouseenter и mouseleave

Я про них и не знал вовсе... Спасибо.

Добавлено через 2 минуты
voraa,

Вспомнил, что у нас на работе один коллега когда то брал поиск отсюда

Спасибо, посмотрю.

Добавлено через 3 минуты
В общем, проблема пока не решена. Никто и не предположил, как решить.
Явно, что-то с шириной div. Но она вполне нормальная 333px. Что за...

Добавлено через 6 минут
voraa,

Положения хинтов вычисляются один раз в самом начале. Если в процессе просмотра изменяется размер окна браузера - они съезжают. Вычислять надо каждый раз перед показом.

Это будет перебор. Они вычисляются от левого верхнего угла viewport. Этого достаточно. Тем более, я вовсе не ориентируюсь на смартфоны или коммерческое применение.
Моя задача проста: дома, для своих, выбрать нужную информацию и отправить на печать. ВСЁ!

Добавлено через 9 минут
voraa,

Очень загадочная функция EventIsInside. Как я понял, она возвращает true, когда мышь приходит с какого то элемента внутри кнопки. Там span с картинкой. Вот когда с него снова на кнопку мышь приходит, тогда и true.

Неа. Она проверяет, что событие произошло внутри кнопки. Т.е. мышь (указатель) не уехала за ее пределы.
Т.е. страхуюсь от событий внутри кнопки.
Ну, картинка внутри тоже может сгенерировать ''mouseover'...

@voraa · 03.02.2025, 08:35

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

В общем, проблема пока не решена. Никто и не предположил, как решить.
Явно, что-то с шириной div. Но она вполне нормальная 333px. Что за...

Что вы к этой ширине прицепились
Вот ваша функция, которая показывает хинт

JavaScript
1
2
3
4
5
6
7
const MouseOverFindHandler = function(event, HintBlock, ButtonElement){
 if (!EventIsInside(event.relatedTarget, ButtonElement)){
  HideHintsForFind();
 } else {
  HintBlock.style.visibility = 'visible';
 };
};

EventIsInside никогда не вернет true (что бы хинт появился), когда мышь наводится на <input>.
Когда наводится на button true возвращается, когда мышь переходит на кнопку с внутреннего span. А у input нет никакого внутреннего элемента. Вы же сами этот код придумали, неужели не понятно, как это работает?

Добавлено через 2 минуты

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

Она проверяет, что событие произошло внутри кнопки.

Событие внутри может происходить только если внутри есть какой то внутренний элемент и мышь с него снова попадает на заданный. Если просто водить мышью по элементу без внутренних, то будут события mousemove, а не mouseover.

@Inskipp · 03.02.2025, 08:39 **[ТС]**

voraa,

Когда наводится на button true возвращается, когда мышь переходит на кнопку с внутреннего span. А у input нет никакого внутреннего элемента. Вы же сами этот код придумали, неужели не понятно, как это работает?

Туплю.

@voraa · 03.02.2025, 08:40

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

Ну, картинка внутри тоже может сгенерировать ''mouseover'...

Какая картинка внутри input?

@Inskipp · 03.02.2025, 08:53 **[ТС]**

voraa,

Событие внутри может происходить только если внутри есть какой то внутренний элемент и мышь с него снова попадает на заданный. Если просто водить мышью по элементу без внутренних, то будут события mousemove, а не mouseover.

Да. Это трудная мысль. Но я ее признал.

@voraa · 03.02.2025, 08:58

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

Это будет перебор. Они вычисляются от левого верхнего угла viewport. Этого достаточно. Тем более, я вовсе не ориентируюсь на смартфоны или коммерческое применение.
Моя задача проста: дома, для своих, выбрать нужную информацию и отправить на печать. ВСЁ!

А стоит ли тогда напрягаться со всякими хинтами и поисками? Зачем они на печати?
Вот, что получается, если менять размер окна браузера

Ну, если и так сойдет, то другое дело.

@Inskipp · 03.02.2025, 10:26 **[ТС]**

Как все было просто в ассемблере... Есть событие - реагируй. Нет события - пропускай.

Добавлено через 4 минуты
voraa,

А стоит ли тогда напрягаться

Скучно. Суставы болят. Все плохо. Не телевизор же смотреть?

krvsa · 03.02.2025, 10:26

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

Есть событие - реагируй. Нет события - пропускай.

Так работает любой ЯП, JS не исключение.

@voraa · 03.02.2025, 10:37

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

Есть событие - реагируй. Нет события - пропускай.

Так события то разные.

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

Скучно. Суставы болят. Все плохо. Не телевизор же смотреть?

Из нетленного

Если мне неймется и не спится,
Или с похмелья нет на мне лица,
Открою Кодекс на любой странице,
И, не могу, читаю до конца.

(с) В.С. Высоцкий

У меня так с MDN было.
И вам советую.
Тогда бы знали и про mouseenter c mouseleave
И про метод contains, что бы определять является ли один узел потомком другого, а не паренты перебирать.

@Inskipp · 03.02.2025, 11:13 **[ТС]**

voraa,

Вспомнил, что у нас на работе один коллега когда то брал поиск отсюда

Мне, пока, мой алгоритм нравится. Но, сравню.

Добавлено через 5 минут
voraa,

И про метод contains, что бы определять является ли один узел потомком другого, а не паренты перебирать.

Не совсем понял. Точнее, совсем не понял. Это как?

@voraa · 03.02.2025, 11:15

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

Не совсем понял. Точнее, совсем не понял. Это как?

https://developer.mozilla.org/... e/contains

JavaScript
1
n1.contains(n2); // === true если  n1===n2 или n2 потомок n1 (содержится в n1)

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью 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, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

Наблюдение: getBoundingClientRect иногда возвращает в свойствах нецелый long

Решение

Решение

@voraa 1254 / 1170 / 179 Регистрация: 21.01.2024 Сообщений: 5,442
	02.02.2025, 21:18
	Hint где находится? Кто его родительский элемент? Какие стили у этого родителя? 0

@voraa 1254 / 1170 / 179 Регистрация: 21.01.2024 Сообщений: 5,442
	02.02.2025, 21:34
	И чего там запускать и смотреть? 0

@Inskipp 0 / 1 / 1 Регистрация: 27.02.2024 Сообщений: 114
	02.02.2025, 21:40 [ТС]
	Это, в общем-то, тестовый фрагмент. Запускать "TestNotepad 11.html" 0

@voraa 1254 / 1170 / 179 Регистрация: 21.01.2024 Сообщений: 5,442
	02.02.2025, 21:49
	Ну а чего смотреть то? Когда и где эти хинты должны появляться? Какая функция из какого файла их должна показывать? Я как бы свой магический кристалл в полировку сдал. А без него - никак. 0