Question

我正在开发一个网站，用户可以滚动浏览一组图像（就像滚动浏览视频或一堆框架一样）。我使用了一个包含img标签的div，并基于鼠标滚轮事件，成功更改了图像的来源（使用我自己的名为changeFrame（）的函数）。此功能还链接到数字输入和jQuery滑块，当框架更改时，jQuery滑块会自动更新，反之亦然。

我假设两种情况：用户使用鼠标（带滚轮）或鼠标垫（使用两个手指）在div上滚动。两种情况都有效。

但是，当涉及到防止默认的滚动行为（整个页面上下滚动）时，使用鼠标垫时会遇到一些问题。

如果我使用 event.preventDefault（），它可以与鼠标滚轮完美配合，但是如果我用两个手指，则不能。我很困惑，因为这两个事件都对dame eventListener（'DOMMouseScroll'和'mousewheel'）做出反应。这是一些代码：也许这不是最干净的代码，但是到目前为止它仍然有效...

var display = document.getElementById('something');
var onImage = false;
display.addEventListener('mouseover', function(e){onImage = true; 
display.addEventListener('DOMMouseScroll', function(event){
    if (onImage){

        var delta = 0;
        if (!event) event = window.event;

        event.preventDefault();

        // normalize the delta
        if (event.wheelDelta) {
            // IE and Opera
            delta = event.wheelDelta / 2;
        } else if (event.detail) {
            // W3C
            if (event.detail == 3 || event.detail == -3) {
                delta = -event.detail / 3;
            } else {
                delta = -event.detail;
            }
        }
        if (parseInt(document.getElementById('frameScroll').value)+(delta))<=0){
            delta = 0;
        }
        if (parseInt(document.getElementById('frameScroll').value)+(delta))>document.getElementById('frameScroll').max){
            delta = 0;
        }
    changeFrame(parseInt(document.getElementById('frameScroll').value) +(delta),4);
    }
}, false);

这是另一个事件：

display.addEventListener('mousewheel', function(event){

    if (onImage){
        var delta = -1;
        if (!event) event = window.event;
        event.preventDefault();
        // normalize the delta
        if (event.wheelDelta) {
            // IE and Opera
             if (event.wheelDelta == 120 || event.wheelDelta == -120){
                 delta = event.wheelDelta / 120;
             } else {
                 delta = event.wheelDelta;
             }

        } else if (event.detail) {
            // W3C
            delta = -event.detail / 2;
        }
        if (parseInt(document.getElementById('frameScroll').value)+(delta))<=0){
            delta = 0;
        }
        if (parseInt(document.getElementById('frameScroll').value)+(delta))>document.getElementById('frameScroll').max){
            delta = 0;
        }
        changeFrame(parseInt(document.getElementById('frameScroll').value) +(delta),4);
    }
}, true);

到底是怎么回事？我期待任何默认的滚轮/滚动事件都将被preventDefault（）...

阻止

禁用鼠标滚轮事件和鼠标垫滚动事件（JavaScript）

0 个答案: