三个事件:
鼠标按下 onmousedown
鼠标移动 onmousemove
鼠标释放 onmouseup
1.onmouseover 属性在鼠标指针移动到元素上时触发。
注:onmouseover 属性不适用以下元素:
2.onmousemove 属性在鼠标指针移动到元素上时触发。
注:onmousemove 属性不适用以下元素:
注: onmouseover 属性、onmousemove 属性所有主流浏览器都支持
3.onmouseup 事件会在鼠标按键被松开时发生。
支持该事件的 HTML 标签:
支持该事件的 JavaScript 对象:
button, document, link
# 案例1:拖拽盒子改变位置
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
*{margin:0;padding:0}
#box{
width:200px;
height: 200px;
background: steelblue;
position: absolute;
left:0px;
top:0px;
}
</style>
<body>
<div id="box"></div>
<script>
var box = document.getElementById("box");
box.onmousedown = function(e){
var e = window.event || e;
var x = e.clientX - box.offsetLeft;
var y = e.clientY - box.offsetTop;
//赋值变量,记算盒子内部距离,再用总的-内部距离,使鼠标位置不偏移到左上角
document.onmousemove = function(e){
//如果写成box.onmousemove,当鼠标移动速度过快会导致鼠标滑出,因此应写document
var e = window.event || e;
box.style.left = e.clientX - x+"px";
box.style.top = e.clientY - y+"px";
}//鼠标移动事件必须放在onmousedown鼠标按下里面
}
box.onmouseup = function(){
document.onmousemove = null;//dom 0级
}
</script>
<body>
</body>
</html>
# 案例2:拖拽小盒子改变宽高
注意(难点):
鼠标动后的距离-按下鼠标后的距离,就能算出鼠标拖动的距离,然后再+ 盒子本身的宽度
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
*{margin:0;padding:0}
#dv1{
width:300px;
height: 300px;
background: grey;
position: relative;
}
#dv2{
width:50px;
height: 50px;
background: black;
position: absolute;
bottom:0px;
right:0px;
}
</style>
<body>
<div id="dv1">
<div id="dv2"></div>
</div>
<script>
var dv2 = document.getElementById("dv2"),
dv1 = document.getElementById("dv1");
dv2.onmousedown = function(e){
var e = window.event || e;//兼容
var x = e.clientX;//按下鼠标后的距离
var y = e.clientY;
var wdith = dv1.offsetWidth;//盒子本身的宽度
var height = dv1.offsetHeight;//盒子本身的高度
document.onmousemove = function(e){
var e = window.event || e;
dv1.style.width =wdith + e.clientX-x+"px";
dv1.style.height =height + e.clientY-y+"px";
}
}
dv2.onmouseup = function(){
document.onmousemove = null;
}
</script>
</body>
</html>