js滚轮事件

最新推荐文章于 2024-05-19 21:16:45 发布

进阶的小牛

最新推荐文章于 2024-05-19 21:16:45 发布

阅读量800

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/datuzidppd5556/article/details/99889917

版权

js 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

js滚轮事件

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
</head>

<body>
    <div class="box">
        <form action="">
            <input type="text" value="1" name="inp">
            <input type="text" value="2" name="inp">
            <input type="text" value="3" name="inp">
        </form>
    </div>
    <script>
        var box = document.querySelector(".box");
        var inp = document.querySelectorAll(".inp");

        // inp.onmousewheel = fun;
        // function fun(ev) {
        //     var ev = window.event || ev;
        //     var sc = ev.wheelDelta;
        //     sc > 0 ? sc = 1 : sc = -1;
        //     var x = parseInt(inp.value);
        //     inp.value = x + parseInt(sc);
        // }
        box.onmouseover = function (ev) {
            var ev = window.event || ev;
            var tag = ev.target;
            console.log(tag);
            tag.onmousewheel = function (ev) {//注意加ev
                var sc = ev.wheelDelta;
                console.log(ev.wheelDelta);
                
                sc < 0 ? (sc = -1) : sc = 1;
                console.log(sc)
                var x = parseInt(tag.value);
                tag.value = x + sc;
            }

        }
    </script>
</body>

</html>

实现效果：
把鼠标放到input上面华东滚轮，input框里面的值会变化。

进阶的小牛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js滚轮事件

js滚轮事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...
复制链接

扫一扫