首页> 基础笔记 >JS/JQ基础学习 >事件 事件
JavaScript-鼠标移动、鼠标按下、鼠标抬起事件onmousedown、onmousemove、onmousemove
作者：小萝卜 2023-03-22 【 javascript 】 浏览 370
简介JavaScript-鼠标移动、鼠标按下、鼠标抬起事件onmousedown、onmousemove、onmousemove
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标移动 鼠标按下 鼠标抬起</title>
<style type="text/css">
*{margin:0px;padding:0px;list-style:none;}
#move{width:200px;height:200px;background:orange;position:absolute;}
</style>
</head>
<body>
<div id="move"></div>
<script type="text/javascript">
var move = document.getElementById('move');
//鼠标按下事件
move.onmousedown = function(){//down下
// alert('iloveyou');
}
//鼠标抬起事件
move.onmouseup = function(){//up上
// alert('鼠标抬起来了..');
}
// var i = 0;
//鼠标移动事件
move.onmousemove = function(e){//move移动
// console.log(i++);
// console.log(e.clientX);
}
//获取move元素
var move = document.getElementById('move');
//给窗口绑定鼠标移动事件
window.onmousemove = function(e){
//获取鼠标相对于浏览器的位置
var x = e.clientX;
var y = e.clientY;
//拼接坐标字符串
var str = "X:"+x+"<br>Y:"+y;
//设置文本
move.innerHTML = str;
//使div跟着鼠标进行移动
move.style.left = x - 100 + 'px';
move.style.top = y - 100 + 'px';
}
</script>
</body>
</html>
很赞哦！ (0)
