[Javascript] Получить события колесика мыши в jQuery?


Answers

​$(document).ready(function(){
    $('#foo').bind('mousewheel', function(e){
        if(e.originalEvent.wheelDelta /120 > 0) {
            console.log('scrolling up !');
        }
        else{
            console.log('scrolling down !');
        }
    });
});
Question

Есть ли способ получить события колесика мыши (не говоря о событиях scroll ) в jQuery?




Плагин, который @DarinDimitrov опубликовал, jquery-mousewheel , разбит на jQuery 3+ . Было бы целесообразнее использовать jquery-wheel который работает с jQuery 3+.

Если вы не хотите идти по маршруту jQuery, MDN очень осторожно использует событие mousewheel поскольку он нестандартен и не поддерживается во многих местах. Вместо этого он говорит, что https://developer.mozilla.org/en-US/docs/Web/Events/wheel поскольку вы получаете гораздо большую специфику в отношении того, какие значения вы получаете. Он поддерживается большинством основных браузеров.




используйте этот код

 knob.bind('mousewheel', function(e){  
 if(e.originalEvent.wheelDelta < 0) {
    moveKnob('down');
  } else {
    moveKnob('up');
 }
  return false;
});



Это работает в каждой версии IE, Firefox и Chrome.

$(document).ready(function(){
        $('#whole').bind('DOMMouseScroll mousewheel', function(e){
            if(e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
                alert("up");
            }
            else{
                alert("down");
            }
        });
    });



Недавно у $(window).mousewheel же проблема, когда $(window).mousewheel возвращался undefined

То, что я сделал, было $(window).on('mousewheel', function() {});

Кроме того, я использую:

function (event) {
    var direction = null,
        key;

    if (event.type === 'mousewheel') {
        if (yourFunctionForGetMouseWheelDirection(event) > 0) {
            direction = 'up';
        } else {
            direction = 'down';
        }
    }
}



Это сработало для меня :)

 //Firefox
 $('#elem').bind('DOMMouseScroll', function(e){
     if(e.originalEvent.detail > 0) {
         //scroll down
         console.log('Down');
     }else {
         //scroll up
         console.log('Up');
     }

     //prevent page fom scrolling
     return false;
 });

 //IE, Opera, Safari
 $('#elem').bind('mousewheel', function(e){
     if(e.originalEvent.wheelDelta < 0) {
         //scroll down
         console.log('Down');
     }else {
         //scroll up
         console.log('Up');
     }

     //prevent page fom scrolling
     return false;
 });

из flow