您的位置：首页 > Web前端 > JavaScript

关于javaScript中onmousemove事件没效果的原因解释

2017-06-09 18:14 405 查看

前言

onmouseXXX事件是用来监听鼠标相关的操作的，例如有onmousedown,onmousemove,onmouseout等，今天我们来看看onmousemove方法的使用，以及注意事项。

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body onmousemove="test()" style="margin: 0;">
<div id="app" style="background: red;">aa</div>
<script type="text/javascript">
var app = document.getElementById("app");
function test(){
var x = event.clientX;
var y = event.clientY;
app.innerText = "x: "+x + "y: " + y
}
</script>
</body>
</html>


效果图



我们要实现的效果是当鼠标在整个页面上移动时，在div标签内显示出当前鼠标位置在浏览器中的坐标，但是当你运行上面的代码时，你发现只有鼠标放到div所在的范围内时，才会显示坐标信息。要想在整个页面中能起到效果，需要采用下面的方式。

方式一： 只采用body标签作为跟标签

<body onmousemove="test()" style="margin: 0;">
<div id="app" style="background: red;">aa</div>
<script type="text/javascript">
var app = document.getElementById("app");
function test(){
var x = event.clientX;
var y = event.clientY;
app.innerText = "x: "+x + "y: " + y
}
</script>
</body>


方式二： 在代码中监听

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body style="margin: 0;">
<div id="app" style="background: red;">aa</div>
<script type="text/javascript">
var app = document.getElementById("app");
function test(){
var x = event.clientX;
var y = event.clientY;
app.innerText = "x: "+x + "y: " + y
}
//此处test没有括号
document.onmousemove = test;
</script>
</body>
</html>


原因解释：

为什么最开始的方式无法实现我们的效果呢？根据我个人的猜测，onmousemove属性需要放到跟标签上才有作用。最开始的方式中，虽然body标签的范围是整个页面，但是它不是跟标签，所以无法实现。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航