我写了一个函数,当光标接近按钮时,它应该改变按钮的位置。不幸的是,按钮停留在同一个位置,除了点击之外,不会对光标做出React(它什么也不做)。我看到了类似的问题,但该代码没有做我需要的事情。
下面是我的函数和带有按钮的部分html代码:
function nextPage() {
window.location.href = "yes.html";
}
function moveButton() {
var x = Math.random() * (window.innerWidth - document.getElementById('noButton').offsetWidth);
var y = Math.random() * (window.innerHeight - document.getElementById('noButton').offsetHeight);
document.getElementById('noButton').style.left = `${x}px`;
document.getElementById('noButton').style.top = `${y}px`;
}
个字符
1条答案
按热度按时间8wigbo561#
这个问题是因为按钮的位置是相对的,所以它们不能移动到DOM中的任何位置。要做到这一点,你需要设置
position: absolute
。还要注意的是,你的代码可以通过将对元素的引用放在你重用的变量中来改进,而不是重复调用DOM,这相对来说非常慢。
此外,更好的做法是在JS中绑定事件处理程序,并避免在HTML中使用
onX
事件属性。最后,
mouseover
事件在鼠标移动到元素上的每个像素上触发一次。对于这个用例,mouseenter
是一个更合适的事件。下面是一个实现了上述更改的工作示例:
个字符