• 当前标签:鼠标事件

程序开发 JavaScript 鼠标事件

<!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>

2017-07-21 00:27:52 50 0 0
阅读详情
  • 1
前往