GetBoundingClientRect() не всегда срабатывает как нужно

@Wolver · Регистрация: 26.04.2015

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

Доброго времени суток!
Возникла проблема следующего характера:
На html страничке есть div с id="tiles":

HTML5
1
2
3
4
5
6
7
8
9
<body>
<div id="inner">
    <div id="tiles">     
        <div id="border"></div>
    </div>
    <script src="./js/SelectDiv.js"></script>
    <script src="./js/MoveDiv.js"></script>
</div>
</body>

который я выбираю в SelectDiv.js и перемещаю в MoveDiv.js (перемещение осуществляется только после выбора div'a стрелочками на клавиатуре).

SelectDiv.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
delete localStorage["object"];
var select_tiles=0;
document.getElementById('tiles').onmousedown = function()
{
    //alert('New mouse down handler.');
    select_tiles=1;
    localStorage.setItem("object", select_tiles); // Запишем в localStorage переменную select_tiles с ключём object
 
    //alert("select_tiles "+select_tiles);
    $('#border').css('background', 'url(./Image/border.png) center center no-repeat'); //border.png - прозрачная картинка с цветной рамочкой 
};

MoveDiv.js

JavaScript
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
var my_inner = document.getElementById('inner');
var qwe=my_inner.getBoundingClientRect();
//alert("qwe_Top:"+qwe.top+", Left:"+qwe.left+", Right:"+qwe.right+", Bottom:"+qwe.bottom);
 
 
    var x = parseInt(getComputedStyle(document.getElementById('tiles'), null).left); //получаем текущее значение left и top
    var y = parseInt(getComputedStyle(document.getElementById('tiles'), null).top); //указанные css с отсечением 'px' через parseInt
    window.onkeydown = function move_tiles(event)
    {
        var select_tiles1=parseInt(localStorage.getItem("object"));   // обращение к localStorage, хранилище вернёт переменную select_tiles
        if (select_tiles1==1) // если объект tiles выделен
        {
            var tiles = document.getElementById('tiles');
            var br=tiles.getBoundingClientRect(); //узнаю абсолютные текущие координаты моего tiles
            //alert("br_Top:"+br.top+", Left:"+br.left+", Right:"+br.right+", Bottom:"+br.bottom);
           
            if (event.keyCode == 37)   //двигаем tiles влево
            {
                if(br.left>qwe.left)       //если коорд. tiles (br.left) будет < qwe.left - левого краем экрана (внешнего div), то влево больше двигаться нельзя
                {
                    /*x = x - 10;
                    document.getElementById('tiles').style.left = x + 'px';     это перенесено в ф-цию MoveTilesX*/   
                    var temp=-1;
                    MoveTilesX(temp);
                }
            }
            else if (event.keyCode == 39)  //двигаем tiles вправо
            {
                if(br.right<qwe.right-64)   //если коорд. tiles (br.right) < правого края экрана - ширина tiles, то вправо больше двигаться нельзя
                {
                    /*x = x + 10;
                     document.getElementById('tiles').style.left = x + 'px';*/
                    temp = 1;
                    MoveTilesX(temp);
                }
            }
            else if (event.keyCode == 38)  //двигаем tiles вверх
            {
                /*y = y - 10;
                document.getElementById('tiles').style.top = y + 'px';*/
                temp=-1;
                MoveTilesY(temp);
            }
            else if (event.keyCode == 40)  //двигаем tiles вниз
            {
                /*y = y + 10;
                document.getElementById('tiles').style.top = y + 'px';*/
                temp=1;
                MoveTilesY(temp);
            }
           // }//if (clientX)
        }
    };
 
function MoveTilesX(temp)
{
    for (var i = 0; i < 64; i++)
    {
        x = x + temp;
        document.getElementById('tiles').style.left = x + 'px';
    }
}
 
function MoveTilesY(temp)
{
    for (var i = 0; i < 64; i++)
    {
        y = y + temp;
        document.getElementById('tiles').style.top = y + 'px';
    }
}

style.css

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
body {
    overflow-x: hidden;
    overflow-y: hidden;
    margin: 0;
}
#inner {
    display: block;
}
#tiles {
    background:url(../Image/tiles.png) center center no-repeat;
    position: relative;
    display: inline-block;
    height:64px;
    width: 64px;
    top: 256px;  
    left: 64px;
    z-index: 5;
    transition: .5s;  /*для плавности передвижения tiles по экрану*/
}
#border {
    height: 66px;
    width: 66px;
    margin-top: -3px;
    margin-left: -1px;
    z-index: 10;
}

Выбор и движение div'a работает, но мне хочется запретить div'y уходить за рамки экрана. Пока что я тестил в X-оси, введя 2 if для проверки на левую и правую границы экрана, которые по совместительству равны div с id="inner". И для этого я использовал ф-цию getBoundingClientRect, которой могу получить абсолютные текущие координаты div'ов как "tiles" так и "inner'a".
Однако я заметил поведение, что указанное мною ограничение срабатывает не каждый раз, - в результате tiles вылазит за пределы экрана. Помогите найти где ошибка и почему так получается?
Дополнительный вопрос по описанному выше коду:
каждое нажатие стрелочек на клаве двигает tiles на размер его ширины (на 64px) с добавлением плавности в css (transition: .5s

.
Но, если нажать стрелку и не отпускать - событие onkeydown будет повторяться несколько раз, tiles что логично, тоже будет двигаться на столько размеров своей ширины, сколько произошло событий onkeydown. Вот только та плавность, которая присуща одному нажатию клавиши пропадает, и tiles слишком быстро улетает в сторону движения. Как заставить этот div плавно обрабатывать все события onkeydown?
p.s.: также буду признателен, за любые комментарии по поводу косяков в коде и вариантов их улучшения, т.к. я весьма слабо разбираюсь в js, но постараюсь всё понять и впитать инфу!

@Mr_Sergo · 22.01.2019, 18:03

Wolver,

Либо замените window.onkeydown на window.onkeyup в файле MoveDiv.js вот так (8 строка)

JavaScript
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
var my_inner = document.getElementById('inner');
var qwe=my_inner.getBoundingClientRect();
//alert("qwe_Top:"+qwe.top+", Left:"+qwe.left+", Right:"+qwe.right+", Bottom:"+qwe.bottom);
 
 
    var x = parseInt(getComputedStyle(document.getElementById('tiles'), null).left); //получаем текущее значение left и top
    var y = parseInt(getComputedStyle(document.getElementById('tiles'), null).top); //указанные css с отсечением 'px' через parseInt
    window.onkeyup = function move_tiles(event)
    {
        var select_tiles1=parseInt(localStorage.getItem("object"));   // обращение к localStorage, хранилище вернёт переменную select_tiles
        if (select_tiles1==1) // если объект tiles выделен
        {
            var tiles = document.getElementById('tiles');
            var br=tiles.getBoundingClientRect(); //узнаю абсолютные текущие координаты моего tiles
            //alert("br_Top:"+br.top+", Left:"+br.left+", Right:"+br.right+", Bottom:"+br.bottom);
           
            if (event.keyCode == 37)   //двигаем tiles влево
            {
                if(br.left>qwe.left)       //если коорд. tiles (br.left) будет < qwe.left - левого краем экрана (внешнего div), то влево больше двигаться нельзя
                {
                    /*x = x - 10;
                    document.getElementById('tiles').style.left = x + 'px';     это перенесено в ф-цию MoveTilesX*/   
                    var temp=-1;
                    MoveTilesX(temp);
                }
            }
            else if (event.keyCode == 39)  //двигаем tiles вправо
            {
                if(br.right<qwe.right-64)   //если коорд. tiles (br.right) < правого края экрана - ширина tiles, то вправо больше двигаться нельзя
                {
                    /*x = x + 10;
                     document.getElementById('tiles').style.left = x + 'px';*/
                    temp = 1;
                    MoveTilesX(temp);
                }
            }
            else if (event.keyCode == 38)  //двигаем tiles вверх
            {
                /*y = y - 10;
                document.getElementById('tiles').style.top = y + 'px';*/
                temp=-1;
                MoveTilesY(temp);
            }
            else if (event.keyCode == 40)  //двигаем tiles вниз
            {
                /*y = y + 10;
                document.getElementById('tiles').style.top = y + 'px';*/
                temp=1;
                MoveTilesY(temp);
            }
           // }//if (clientX)
        }
    };
 
function MoveTilesX(temp)
{
    for (var i = 0; i < 64; i++)
    {
        x = x + temp;
        document.getElementById('tiles').style.left = x + 'px';
    }
}
 
function MoveTilesY(temp)
{
    for (var i = 0; i < 64; i++)
    {
        y = y + temp;
        document.getElementById('tiles').style.top = y + 'px';
    }
}

либо вам нужно все переписывать абсолютно по-другому

@Wolver · 22.01.2019, 18:16 **[ТС]**

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

Либо замените window.onkeydown на window.onkeyup

но ведь onkeyup срабатывает, когда палец отпускает клавишу клавы, если так сделать - придётся каждый раз тыкать клавишу, чтобы сдвинуть на одну длину (64px) мой div, это безусловно решит оба вопроса, но будет неприемлимо с точки зрения удобства...

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

либо вам нужно все переписывать абсолютно по-другому

почему? логика if'ов не верна? и как?

@Mr_Sergo · 23.01.2019, 03:07

Wolver, позже скину вам пример, вам нужно код немного подкорректировать.

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

Примерно так -> https://codepen.io/Mr_Sergo/pen/gqbbMp

HTML5
1
<div id="img"></div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
let img = document.querySelector('#img');
let left = 0;  // переменная к которой будем плюсовать значение
let diffX;  // то что вам не хватало : "ширина дива" минус (остаток от деления ширины окна браузера от ширины дива)
 
window.addEventListener('keydown',e => {
 
    diffX = img.offsetWidth - window.innerWidth % img.offsetWidth;  // при keydown высчитываем остаток от деления ширины окна браузера от ширины дива
    
    if(e.keyCode == 39){  // если клавиша вправо
        if(left + img.offsetWidth < window.innerWidth){  // если сумма переменных "left" и ширина дива меньше ширины окна браузера
            left += 50;  // то добавляем 50
            img.style.left = left - diffX + 'px';  // двигаем вправо, не просто используя "left" а учитывая "diffX"
        }
    }
    
    if(e.keyCode == 37){  // если клавиша влево
        if(left > 0){  // если значение "left" больше нуля (левой границы браузера)
            left -= 50;  // то отнимаем 50
            img.style.left = left + 'px';  // и двигаем на соответствующее значение див
        }
    }
 
});

CSS
1
2
3
4
5
6
7
8
9
#img {
    width: 50px;
    height: 50px;
    position: absolute;
    left: 0px;
    top: 0px;
    background:url(http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/0c/0c5734f361563d0e7653a23b5bbd6b2bffc939f0_medium.jpg) center center no-repeat;
    transition: .5s;
}

Ваша ошибка была в том что вы не правильно высчитывали правую границу окна браузера.
Вникайте в пример и вам станет ясно как нужно сделать в вашем коде.
Можете попробовать во время нажатия стрелок изменить размер окна браузера что бы удостовериться что картинка не заезжает и не не доезжает до правого края браузера.

Добавлено через 4 часа 19 минут

▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒

Wolver,

Вот получше код -> https://codepen.io/Mr_Sergo/pen/zexKaM

HTML5
1
<div id="img"></div>

JavaScript
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
28
29
30
31
let step = 100;
let img = document.querySelector('#img');
let left = 0;
 
window.addEventListener('keydown',e => {
    let img_RIGHT_line = left + img.offsetWidth;
    let diff = window.innerWidth - img_RIGHT_line;
 
    if(e.keyCode == 37 && left > 0){
        if(left < step){
            img.style.left = '0px';
            left = 0;
        }
        else{
            left -= step;
            img.style.left = left + 'px';
        }
    }
    if(e.keyCode == 39){
        if(left + img.offsetWidth < window.innerWidth){
            if(window.innerWidth - img_RIGHT_line <= step){
                left += diff;
                img.style.left = left + 'px';
            }
            else{
                left += step;
                img.style.left = left + 'px';
            }
        }
    }
});

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
body{
    overflow: hidden;
    height: 1000px;
}
 
#img {
    width: 285px;
    height: 260px;
    position: absolute;
    left: 0px;
    top: 0px;
    background:url(http://gallery.forum-grad.ru/files/4/8/3/6/4/oldcat_thumb.jpg) center center no-repeat;
    transition: .5s;
}

Добавлено через 2 минуты
Вниз и вверх по тому же принципу

@Mr_Sergo · 23.01.2019, 19:40

Wolver,

Если нужно, вот код с движением во всех направлениях -> https://codepen.io/Mr_Sergo/pen/bzddWa

HTML5
1
<div id="img"></div>

JavaScript
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
28
29
30
31
32
33
34
35
36
37
let img = document.querySelector('#img');
 
let stepLEFT = 100;
let stepTOP = 100;
 
let moveLEFT = 0;
let moveTOP = 0;
 
window.addEventListener('keydown',e => {
    let sideRIGHT = moveLEFT + img.offsetWidth,
        diffLEFT = window.innerWidth - sideRIGHT;
 
    if(e.keyCode == 37){
        if(moveLEFT < stepLEFT) img.style.left = (moveLEFT = 0) + 'px';
        else img.style.left = (moveLEFT -= stepLEFT) + 'px';
    }
 
    if(e.keyCode == 39){
        if(sideRIGHT < window.innerWidth){
            if(window.innerWidth - sideRIGHT <= stepLEFT) img.style.left = (moveLEFT += diffLEFT) + 'px';
            else img.style.left = (moveLEFT += stepLEFT) + 'px';
        }
    }
 
    let sideBOTTOM = moveTOP + img.offsetHeight,
        diffTOP = window.innerHeight - sideBOTTOM;
 
    if(e.keyCode == 38){
        if(moveTOP < stepTOP) img.style.top = (moveTOP = 0) + 'px';
        else img.style.top = (moveTOP -= stepTOP) + 'px';
    }
 
    if(e.keyCode == 40){
        if(window.innerHeight - sideBOTTOM <= stepTOP) img.style.top = (moveTOP += diffTOP) + 'px';
        else img.style.top = (moveTOP += stepTOP) + 'px';
    }
});

CSS
1
2
3
4
5
6
7
8
9
10
#img{
    width: 150px;
    height: 150px;
    position: absolute;
    left: 0px;
    top: 0px;
    background:url(http://gallery.forum-grad.ru/files/4/8/3/6/4/oldcat_thumb.jpg) center center no-repeat;
    background-size: 100%;
    transition: .5s;
}

@Wolver · 23.01.2019, 23:57 **[ТС]**

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

Если нужно, вот код с движением во всех направлениях -> https://codepen.io/Mr_Sergo/pen/bzddWa

благодарю, я уже добавил обработчик на вверх/вниз, взяв ваш код, который был вами выложен в предыдущем посте (2-ю его модификацию у фразы "Вот получше код").

Кстати, только за одно использование котеек на background div'a в вашем примере - заслуживаете жирный лайк, т.к. я обожаю котэ! ><
Код превосходно работает, я отдебажил js-скрипт в хроме, адаптировал под свои нужды, заменив window.innerWidth и window.innerHeight на параметры внешнего дива с id="inner", чтобы мой tiles двигался лишь в inner'e, а не окне, но не суть)
Главное, за код вам также огромное спс!

Единственное что странно почему transition влияет на поведение GetBoundingClientRect() - в вашем коде вы его не используете, в моём коде эта ф-ция как вы правильно заметили в одном из комментов глючит именно из-за transition. Я пришёл к выводу, что transition не успевает завершиться, в то время как обработчик ловит новое событие onkeydown (т.к. кнопку не отпустили или нажали за меньшее время от прошлого нажатия (срабатывания onkeydown) чем transition: .5s. В результате ф-ция возвращает дробные значения (просматривал вот сейчас дебагом с выводом в консоль), сбиваясь подсчётом, и именно из-за этого div и залазит за границы экрана... (см. вложение)
Разве не должны пришедшие события от клавы оседать в буффере и ждать своей очереди обработки?

-----------------
И ещё, подскажите пожалуйста, я так понимаю, чтобы добиться решения моего дополнительного вопроса в шапке топика - мне нужно писать обработчик, который будет принудительно изменять время обработки событий клавиатуры?
Я вот по гуглу нашёл напр. вот такой в статейке: а именно вот этот код в песочнице: http://jsfiddle.net/BxbAG/
(хотя в нём тоже есть свои недостатки, напр если onkeydown от одной и той же кнопки клавы поступит больше чем указанное время изменения обработки событий клавы - сработает только 1 раз, но в то же время длительное удерживание кнопки делает нужный пользовательский интервал их обработки)

@Mr_Sergo · 24.01.2019, 01:44

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

transition не успевает завершиться, в то время как обработчик ловит новое событие onkeydown

Примерно так. Но попробую своими словами

Когда до края остается совсем немного 10px-20px , не суть, немного - меньше чем указано при нажатии на стрелку (в моем случае, последнем, это '100') скрипт начинает плюсовать полагаясь на текущие координаты не дождавшись завершения движения картинки.
Представим что у нас transition стоит 10s и до края осталось немного. Скрипт говорит браузеру двигай картинку, картинка начала движение и пошел отсчет 10сек. , в этот промежуток времени скрипт снова говорит двигай картинку так как полагаясь на текущие координаты он понимает что край еще не настал, и браузер выполняет его команду

--- примерно таким образом и получается что картинка уезжает за край, лекарство

:
использовать переменную которая изменяется МОМЕНТАЛЬНО а не в течении 10 секунд, в моем случае это moveLEFT- отвечает за перемещение по горизонтали и moveTOP- отвечает за перемещение по вертикали.

Добавлено через 6 минут
Проще говоря вы используете плавно меняющуюся переменную getBoundingClientRect() --- потому что она плавно (в течении 0.5s) меняет свое значение
Как-то так

Новые блоги и статьи Все статьи Все блоги /
Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка SDL3, Box2D, FreeType и SDL3_ttf из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .
Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.

GetBoundingClientRect() не всегда срабатывает как нужно

Решение