Событие колеса мыши и событие прокрутки конфликтуют друг с другом

Моя проблема заключается в следующем:

У меня есть событие MouseWheel (из плагина: https://github.com/brandonaaron/jquery-mousewheel), который запускает функцию:

$(document).on('mousewheel', onMouseWheel);

function onMouseWheel(event,delta)
{ Code... }

У меня также есть событие прокрутки, которое запускает другую функцию:

$(document).on('scroll', onScroll);

function onScroll()
{ Code... }

Однако при использовании колесика мыши запускаются оба события, поэтому запускаются обе функции, чего я не хочу. Они должны быть отдельными, поскольку использование колесика мыши и перетаскивание полосы прокрутки должны давать разные результаты. Проблема возникает только таким образом, т.е. функция колесика мыши не запускается при перетаскивании полосы прокрутки.

РЕДАКТИРОВАТЬ:

С небольшой помощью я понял, что проблема возникает из-за того, что я использую ScrollLeft() внутри моей функции колесика мыши, что, конечно же, вызывает событие прокрутки.

Я пытался придумать решение, но безуспешно. Кто-нибудь может помочь? Спасибо!

РЕДАКТИРОВАТЬ: больше кода:

$(document).on('scroll', onScroll );

            function onScroll()
            {
                code...
            }


            $(document).on('mousewheel', onMouseWheel ) );

            function onMouseWheel(event,delta)
            {
                event.preventDefault(); 

                if(delta<0)
                {       
                    detectDown();       
                }

                else if(delta>0)
                {
                    detectUp();
                }

                return false;   
            }


            $(document).on("keydown", onKeyDown);

            function onKeyDown(e)
            {
                event.preventDefault();

                if (e.keyCode == 37) 
                { 
                    detectUp();
                }
                else if (e.keyCode == 39)
                {
                    detectDown();   
                }

            }


            function detectUp()
            {
                $("html, body").animate({scrollLeft:(currentElement.prev().position().left - 100)}, 800, 'easeOutQuad'); 
                currentElement = currentElement.prev();
            }

            function detectDown()
            {
                $("html, body").animate({scrollLeft:(currentElement.next().position().left - 100)}, 800, 'easeOutQuad'); 

            }

Может быть, это помогает?


person Mattias Bregnballe    schedule 09.12.2013    source источник
comment
Вы пробовали event.stopImmediatePropagation() в событии колесика мыши.   -  person James    schedule 09.12.2013
comment
Спасибо, но нет, не помогло. Может быть, я делаю это неправильно. Я добавил больше кода, чтобы вы могли видеть контекст.   -  person Mattias Bregnballe    schedule 09.12.2013


Ответы (2)


Добавьте return false в конце функции onMouseWheel.

function onMouseWheel(event, delta) {
  // code
  return false;
}

Это отключит действие прокрутки по умолчанию для события 'mousewheel', поэтому событие 'scroll' не будет запущено.

скрипка

person Aurélien Gasser    schedule 09.12.2013
comment
Спасибо! У меня уже есть event.preventDefault();. Однако из-за вашего комментария я понял, что у меня есть ScrollLeft() внутри функции колесика мыши, что, конечно же, вызывает проблему. Есть ли выход из этого бардака? - person Mattias Bregnballe; 09.12.2013

Я пришел к выводу, что лучшее решение - создать собственную полосу прокрутки. Таким образом, мы можем избежать вызова функции прокрутки и различных типов прокрутки, мешающих друг другу.

person Mattias Bregnballe    schedule 11.12.2013