onmousedown 是鼠标按下事件
onmouseup 是鼠标弹起事件
onmousemove 是鼠标移动事件，鼠标移动时持续触发
下面我们看代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="d" style="width:200px;height:200px;border:1px solid red">
父元素
<div id="inner" style="width:100px;height:100px;border:1px solid gray">
子元素
</div>
</div>
<script type="text/javascript">
var d = document.getElementById('d');//获取父元素
//当鼠标按下时触发
d.onmousedown = function(){
console.log('mousedown');
}
//当鼠标弹起时触发
d.onmouseup = function(){
console.log('onmouseup');
}
//当鼠标移动时触发
d.onmousemove = function(){
console.log('mousemove');
}
</script>
</body>
</html>
以上，我们给父元素绑定了onmousedown、onmouseup和onmousemove事件。
当鼠标在父元素和子元素上移动时会触发onmousemove事件。
当鼠标在父元素和子元素上按下鼠标会触发onmousedown事件。
当鼠标松开时触发onmouseup事件。
大家可以自行测试一下以加深印象。
|
窥视卡
雷达卡
发表于 2023-1-24 19:48:07
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-16 15:01:14
