Event.preventDefault не предотвращает прокрутку

после реализации функции debounce из lodash эта функция больше не может препятствовать прокрутке страницы пользователем.

Я попытался передать debounce часть lodash в другую функцию, но не смог заставить ее работать таким образом.

Это код:

$(document).on('mousewheel DOMMouseScroll', _.debounce(function(event) {

        event.preventDefault();
        var wd = event.originalEvent.wheelDelta || -event.originalEvent.detail;

        var a= document.getElementsByClassName('mouseScrollAnchor');
        if (wd < 0) {
            for(var i = 0 ; i < a.length ; i++) {
                var t = a[i].getClientRects()[0].top;
                if (t >= 40) break;
            }
        }
        else {
            for(var i = a.length-1 ; i >= 0 ; i--) {
                var t = a[i].getClientRects()[0].top;
                if (t < -20) break;
            }
        }

        if (i >= 0 && i < a.length) {
            $('html,body').animate({
                scrollTop: a[i].offsetTop
            });
        }
    }, 500));

Что я ожидаю от функции: Это не позволяет пользователю нормально прокручивать, вместо этого он должен прокручивать до следующего якоря в списке якорей.

Что оно делает: Это позволяет пользователю прокручивать вручную (что не должно быть разрешено), и через 0,5 секунды он прокручивается до привязки.

В основном он работает как задумано, за исключением части event.preventDefault.

Редактировать: Теперь работает! Ниже вы можете найти рабочий код:

jQuery(document).ready(function($){

    var changeView = function(event){
        var wd = event.originalEvent.wheelDelta || -event.originalEvent.detail;

        var a= document.getElementsByClassName('mouseScrollAnchor');
        if (wd < 0) {
            for(var i = 0 ; i < a.length ; i++) {
                var t = a[i].getClientRects()[0].top;
                if (t >= 40) break;
            }
        }
        else {
            for(var i = a.length-1 ; i >= 0 ; i--) {
                var t = a[i].getClientRects()[0].top;
                if (t < -20) break;
            }
        }

        if (i >= 0 && i < a.length) {
            $('html,body').animate({
                scrollTop: a[i].offsetTop
            });
        }
    };

    var mousewheelDebounced = _.debounce(changeView, 25);

    $(document).on('mousewheel DOMMouseScroll', function(event) {
        event.preventDefault();
        mousewheelDebounced(event);
    });

    /*...*/

}

Вы читали stackoverflow.com/questions/39237942/… ?

mjwills 12.02.2019 22:46

Возможный дубликат Подчеркнуть отказ аргументами

mjwills 12.02.2019 22:48

Проблема в том, что при запуске debounce событие уже выполнено

epascarello 12.02.2019 22:56

@mjwills большое спасибо! Я отредактирую рабочий код в сообщении.

bloodipwn 13.02.2019 00:16

Поместите свой рабочий код как отвечать, а не как вопрос. Это нормально, чтобы ответить на свой вопрос.

mjwills 13.02.2019 01:27
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
5
462
0

Другие вопросы по теме