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) меняет свое значение
Как-то так

Новые блоги и статьи Все статьи Все блоги /
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Нашел на реддите интересную статью под названием «Кто-нибудь знает, где получить бесплатный компьютер или. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .

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

Решение