如何解决如果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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。