<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#are{
width: 300px;
height: 50px;
border: 1px solid #0000FF;
margin-bottom:10px;
}
#showMsg{
width: 300px;
height: 20px;
border: 1px solid #FF00FF;
}
</style>
</head>
<body>
<div id="are"></div>
<div id="showMsg"></div>
<!--
事件对象
-->
<script type="text/javascript">
// 获取div
var are = document.getElementById("are")
var showMsg = document.getElementById("showMsg")
// 鼠标移动事件
are.onmousemove = function(event){
console.log(event)
// 兼容浏览器
event = event || window.event
var x = event.clientX
var y = event.clientY
showMsg.innerHTML = "x:"+x+"y:"+y
}
</script>
</body>
</html>
javascript 鼠标移动
最新推荐文章于 2024-04-16 19:44:59 发布