Наблюдение: 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)

Новые блоги и статьи Все статьи Все блоги /
Валидация и контроль данных табличной части документа перед записью Maks 22.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в КА2. Задача: контроль и валидация данных табличной части документа перед записью с учетом регламента компании. . .	Отчёт о затраченных материалах за определенный период с макетом печатной формы Maks 21.04.2026 Отчёт из решения ниже размещён в конфигурации КА2. Задача: разработка отчёта по затраченным материалам за определённый период, с возможностью вывода печатной формы отчёта с шапкой и подвалом. В. . .	Отчёт о спецтехнике находящейся в ремонте Maks 20.04.2026 Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .	Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)" Hrethgir 19.04.2026 Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .
Запрет удаления строк ТЧ документа при определённом условии Maks 19.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .	Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .

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

Решение

Решение

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

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

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

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