Javascript 当元素超出父元素时，停止移动元素

所以，我有一个事件监听器键在箭头右边，当你按下方块移动到

xPX

但是我的父元素这个

w

和

h

例如，设置一个

100px

，我想停止移动，但我不能，我尝试使用

element.offsetWidth>0

来移动它们

---

请看这把小提琴：

您的代码中几乎没有错误。我已经评论过了。下面是我如何制作右箭头-你可以将同样的逻辑应用到其余的动作

代码：

---

代码中几乎没有错误。我已经评论过了。下面是我如何制作右箭头-你可以将同样的逻辑应用到其余的动作

代码：

我重建了您的代码：

 document.addEventListener('keydown', (event) => {
        const w = main.getBoundingClientRect().right - carre.getBoundingClientRect().right;
        const positionLeft = carre.getBoundingClientRect().left;
        if(event.keyCode == '39') {
            if (w >= 0) {
                carre.style.left = (positionLeft) + 10 + 'px';
            } else {
                carre.style.left = '0'
            }
        }
        if (event.keyCode == '37') {
            if (w >= 0) {
                carre.style.left = (positionLeft) - 10 + 'px';
            }else {
                carre.style.left = '0'
            }
        }
    })

我重新生成您的代码：

 document.addEventListener('keydown', (event) => {
        const w = main.getBoundingClientRect().right - carre.getBoundingClientRect().right;
        const positionLeft = carre.getBoundingClientRect().left;
        if(event.keyCode == '39') {
            if (w >= 0) {
                carre.style.left = (positionLeft) + 10 + 'px';
            } else {
                carre.style.left = '0'
            }
        }
        if (event.keyCode == '37') {
            if (w >= 0) {
                carre.style.left = (positionLeft) - 10 + 'px';
            }else {
                carre.style.left = '0'
            }
        }
    })