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

Question

我有一个 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!"
}

Answer 1

下面是一些代码示例。第一件主要的事情是元素位置样式属性必须设置为绝对。然后我们可以使用左右样式属性来改变位置。要检查位置，您可以使用 .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>

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

If div is at a certain position, trigger javascript function

html

javascript

position

function

keycode