JavaScript 鼠标事件

黄良钵

分类: 程序开发 668 0

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.         <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.         <title>鼠标事件</title>
  8.         <style>
  9.             section{
  10.                 width: 150px;
  11.                 height: 150px;
  12.                 background-color: blue;
  13.                 margin: 100px auto;
  14.                 border-radius: 50%;
  15.             }
  16.             div{
  17.                 height: 50px;
  18.                 width: 50px;
  19.                 background-color: green;
  20.             }
  21.             span{
  22.                 width: 30px;
  23.                 height: 30px;
  24.                 display: block;
  25.                 background-color: hsl(0,100%,50%);
  26.                 position: absolute;
  27.                 border-radius: 50%;
  28.             }
  29.         </style>
  30.     </head>
  31.     <body>
  32.         <span></span>
  33.         <span></span>
  34.         <span></span>
  35.         <span></span>
  36.         <span></span>
  37.         <section>
  38.             <div>
  39.             </div>
  40.         </section>
  41.         <script>
  42.             var sec = document.querySelector('section')
  43.             sec.addEventListener('click',function(){
  44.                 console.log('clicked')
  45.             })
  46.             sec.addEventListener('dblclick',function(){
  47.                 console.log('dblclicked')
  48.             })
  49.             // 双击事件 会造成两个单机事件
  50.             // 鼠标按下去时触发
  51.             sec.onmousedown =function(e){
  52.                 sec.style.backgroundColor = 'darkblue'
  53.             }
  54.             // 鼠标弹起的时候触发
  55.             sec.onmouseup =function(e){
  56.                 console.log(e)
  57.                 sec.style.backgroundColor= 'yellow'
  58.             }
  59.             // 左键 which = 1 button = 0 buttons = 0
  60.             // 右键 which = 3 button = 2 buttons = 0
  61.             // 中键 which = 2 button = 1 buttons = 0
  62.             var spans = document.querySelectorAll('span')
  63.             // onmousemove 当鼠标指针移动此元素上触发
  64.             window.onmousemove =function(e){
  65.                 for(var i = 0;i< spans.length;i++){
  66.                     var span = spans[i]
  67.                     var r1 = Math.random()*600 - 150
  68.                     var r2 = Math.random()*600 - 150
  69.                     var r3 = Math.random()
  70.                     span.style.top = e.pageY + r1 + 'px'
  71.                     span.style.left = e.pageX + r2 + 'px'
  72.                     span.style.transform = 'scale(' + r3 + ')'
  73.                     span.style.backgroundColor = 'hsl(' +r3*360 + ',100%,50%)'
  74.                 }
  75.             }
  76.             sec.onmouseenter =function(e){
  77.                 console.log('鼠标来了')
  78.             }
  79.             // onmouseenter 进入标签元素的范围 包括其子标签元素的范围 不会冒泡
  80.             // onmouseover 在标签元素上面 会冒泡
  81.             // onmouseleave 鼠标离开标签元素时
  82.             sec.onmouseleave =function(){
  83.                 console.log('鼠标走了')
  84.             }
  85.             sec.onwheel =function(e){
  86.                 console.log('x:'+ e.deltaX + ',y' + e.deltaY + ',z' + e.deltaZ)
  87.                 // event 中的deltaX表示水平方向的滚动
  88.                 // event 中的deltaY表示垂直方向的滚动
  89.                 // event 中的deltaZ表示z轴方向的滚动
  90.             }
  91.         </script>
  92.     </body>
  93. </html>
  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
JavaScript、鼠标事件

作者简介: 黄良钵

打赏

博客站长,前端开发工程师

共 0 条评论关于 “JavaScript 鼠标事件”

Loading...