如果div在某个位置，则触发javascript函数

问题描述

当按下箭头键时，我有一个div移动。如果div到达屏幕上由坐标确定的某个位置，我希望运行一个函数，更改div的innerHTML。这样做的一种简单易懂的方法是什么？

<div class="counter" id="yellow">P1</div>
<div id="div"></div>

document.onkeydown = detectKey;
function detectKey(e) {
  if (selectedElement) {
    if (e.keyCode == '39') {
      var posLeft = selectedElement.offsetLeft
      selectedElement.style.left = (posLeft + 150) + "px"
    }
    if (e.keyCode == '38') {
      var posTop = selectedElement.offsetTop
      selectedElement.style.top = (posTop - 150) + "px"
    }
    if (e.keyCode == '37') {
      var posLeft = selectedElement.offsetLeft
      selectedElement.style.left = (posLeft - 150) + "px"
    }
    if (e.keyCode == '40') {
      var posTop = selectedElement.offsetTop
      selectedElement.style.top = (posTop + 150) + "px"
    }
  }
}

if (document.getElementById("yellow").position = x = 89,y = 273) {
document.getElementById("div").innerHTML = "Made it!"
}

解决方法

下面是一些代码作为示例。 首先要注意的是元素位置样式属性必须设置为绝对值。然后，我们可以使用left和right样式属性更改位置。 要检查位置，可以使用.getBoundingClientRect（）;。这给出了一个矩形。 然后，我们将顶部用作y，将左侧用作y。 现在，在我的示例中，我正在使用一些伪值，但是如果要触发一次将其向下移动，则可以更改if语句中的值以使其触发到所需位置。

<div class="counter" id="yellow" style="position:absolute">P1</div>
<div id="div"></div>
<script>
    let selectedElement = document.getElementById("yellow")
    document.onkeydown = detectKey;
    function detectKey(e) {
        if (selectedElement) {
            console.log(e.keyCode)
            if (e.keyCode == '39') {
                console.log('here')
                var posLeft = selectedElement.offsetLeft
                selectedElement.style.left = (posLeft + 150) + "px"
            }
            if (e.keyCode == '38') {
                var posTop = selectedElement.offsetTop
                selectedElement.style.top = (posTop - 150) + "px"
            }
            if (e.keyCode == '37') {
                var posLeft = selectedElement.offsetLeft
                selectedElement.style.left = (posLeft - 150) + "px"
            }
            if (e.keyCode == '40') {
                var posTop = selectedElement.offsetTop
                selectedElement.style.top = (posTop + 150) + "px"
            }
            let pos = selectedElement.getBoundingClientRect();
            let y = pos.top
            let x = pos.left
            console.log(x)
            console.log(y)
            // put your own values or ranges here
            if (x < 100 && y > 100) {
                document.getElementById("div").innerHTML = "Made it!"
            }
        }

    }
</script>