当前位置：网站首页>JS preventdefault() keyboard input limit onmousewheel stoppropagation stop event propagation

JS preventdefault() keyboard input limit onmousewheel stoppropagation stop event propagation

2022-07-28 19:54:00 【HandsomeDanielWu】

prevent prevent

Input limit 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;
        //  to box Add mouse wheel event monitoring to the box 
        oBox.onmousewheel = function (e){
            //  Block default events , That is, when the user scrolls the mouse wheel in the box , The scrollbar scrolling of the page will not be triggered 
            e.preventDefault();
            if(e.deltaY > 0){
                a++;
            }else{
                a--;
            }
            oInfo.innerText = a;
        }
    </script>
</body>

stopPropagation Stop spreading