鼠标滚轮事件,e.onmousewheel()

来源:4-19 事件对象(3)

日拱一卒_

2021-11-15 10:49:29

<!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>随堂练习</title>

        <style>

            #box{

                width: 200px;

                height: 200px;

                background: #333;

            }

            body{

                height: 2000px;

            }

        </style>

    </head>

    <body>

       <div id="box"></div>

       <h1 id="info">0</h1>


        <script>

            var box=document.getElementById('box');

            var info=document.getElementById('info');


            // 全局变量中显示的数字

            var a=0;

            // 给 box 盒子添加鼠标滚轮事件监听

            box.onmousewheel = function(e){

                // 阻止默认事件:就是说当用户在盒子里面滚动鼠标滚轮的时候,此时不会引发页面的滚动条滚动

                e.preventDefault();

                if(e.deltaY>0){

                    a++;

                }else{

                    a--;

                }

                info.innerText = a;

            };


        </script>

    </body>

</html>



写回答

1回答

好帮手慕慕子

2021-11-15

同学你好,代码实现是正确的,继续加油,祝学习愉快~

0

0 学习 · 15276 问题

查看课程