JS preventDefault() 键盘输入限制 onmousewheel stopPropagation停止事件传播

HandsomeDanielWu

于 2022-07-28 13:43:53 发布

阅读量354

点赞数

分类专栏： JS 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/HandsomeDanielWu/article/details/126030270

版权

JS 专栏收录该内容

44 篇文章

订阅专栏

这篇博客介绍了如何使用JavaScript阻止元素的鼠标滚轮事件默认行为，以防止页面滚动。通过`onmousewheel`事件监听器和`preventDefault()`方法，可以实现当用户在特定元素上滚动鼠标时，阻止页面滚动。同时，文章也提到了`stopPropagation()`方法的作用，但主要焦点在于阻止事件的默认处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

prevent阻止

输入限制onmousewheel

 <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: #333;
            padding-bottom: 20px;
        }
        body{
            height: 2000px;
        }
    </style>
</head>
<body>
    <div id="box">
    </div>
    <div id="info"></div>
    <script>
        var oBox = document.getElementById('box');
        var oInfo = document.getElementById('info');
        var a = 0;
        // 给box盒子添加鼠标滚轮事件监听
        oBox.onmousewheel = function (e){
            // 阻止默认事件，就是说当用户在盒子里滚动鼠标滑轮的时候，不会触发页面的滚动条滚动
            e.preventDefault();
            if(e.deltaY > 0){
                a++;
            }else{
                a--;
            }
            oInfo.innerText = a;
        }
    </script>
</body>

stopPropagation 停止传播