Отключение событий колесика мыши и событий прокрутки коврика для мыши (JavaScript) - PullRequest
Новая
       51

Отключение событий колесика мыши и событий прокрутки коврика для мыши (JavaScript)

0 голосов
/ 11 октября 2019

Я разрабатываю веб-сайт, где пользователь может прокручивать набор изображений (как при прокрутке видео или стопки кадров). Я использую div, который содержит тег img, и, основываясь на событии колеса мыши, я успешно меняю источник изображения (используя свою собственную функцию changeFrame ()). Эта функция также связана с числовым вводом и ползунком 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);

Что именно происходит? Я ожидал, что любое событие колесика / прокрутки по умолчанию будет заблокировано с помощью protectDefault () ...

...