JavaScript 鼠标事件 - 会coding的HAM

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>鼠标事件</title>
<style>
section{
width: 150px;
height: 150px;
background-color: blue;
margin: 100px auto;
border-radius: 50%;
}
div{
height: 50px;
width: 50px;
background-color: green;
}
span{
width: 30px;
height: 30px;
display: block;
background-color: hsl(0,100%,50%);
position: absolute;
border-radius: 50%;
}
</style>
</head>
<body>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<section>
<div>
</div>
</section>
<script>
var sec = document.querySelector('section')
sec.addEventListener('click',function(){
console.log('clicked')
})
sec.addEventListener('dblclick',function(){
console.log('dblclicked')
})
// 双击事件会造成两个单机事件
// 鼠标按下去时触发
sec.onmousedown =function(e){
sec.style.backgroundColor = 'darkblue'
}
// 鼠标弹起的时候触发
sec.onmouseup =function(e){
console.log(e)
sec.style.backgroundColor= 'yellow'
}
// 左键 which = 1 button = 0 buttons = 0
// 右键 which = 3 button = 2 buttons = 0
// 中键 which = 2 button = 1 buttons = 0
var spans = document.querySelectorAll('span')
// onmousemove 当鼠标指针移动此元素上触发
window.onmousemove =function(e){
for(var i = 0;i< spans.length;i++){
var span = spans[i]
var r1 = Math.random()*600 - 150
var r2 = Math.random()*600 - 150
var r3 = Math.random()
span.style.top = e.pageY + r1 + 'px'
span.style.left = e.pageX + r2 + 'px'
span.style.transform = 'scale(' + r3 + ')'
span.style.backgroundColor = 'hsl(' +r3*360 + ',100%,50%)'
}
}
sec.onmouseenter =function(e){
console.log('鼠标来了')
}
// onmouseenter 进入标签元素的范围包括其子标签元素的范围不会冒泡
// onmouseover 在标签元素上面会冒泡
// onmouseleave 鼠标离开标签元素时
sec.onmouseleave =function(){
console.log('鼠标走了')
}
sec.onwheel =function(e){
console.log('x:'+ e.deltaX + ',y' + e.deltaY + ',z' + e.deltaZ)
// event 中的deltaX表示水平方向的滚动
// event 中的deltaY表示垂直方向的滚动
// event 中的deltaZ表示z轴方向的滚动
}
</script>
</body>
</html>

发送评论编辑评论

发送评论 编辑评论

推荐文章

发送评论编辑评论