Fullcalendar mousewheel event prev next

问题

i'm trying to do a simple think in Fullcalendar ( 1.6.2 ) and is to simulate the prev and next button throught the mouse wheel up and down, similar to google calendar.

Here is the code i'm using, this code is from another question in here i think, but i can´t remember wich one :S

calendar.bind('mousewheel', function(event, delta) {

var view =  calendar.fullCalendar('getView');
//alert(view.name); //Can retrieve the view name successfully 
//alert(delta); // Undefined
//alert(event); // [Object object]

if (view.name == "month") {
                if (delta > 0) {
                alert(delta);  
                calendar.fullCalendar('prev'); 
            }
            if (delta < 0) { 
                alert(delta);
                calendar.fullCalendar('next'); 
            }
            return false;
}

});

The problem is delta is Undefined

Anyone have a clue what i'm doing wrong? I'm very new to Jquery or Javascript

EDIT

var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel";
// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
var keys = [37, 38, 39, 40];

function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
  e.preventDefault();
  e.returnValue = false;  
}

function keydown(e) 
{
    for (var i = keys.length; i--;) {
      if (e.keyCode === keys[i]) {
          preventDefault(e);
          return;
       }
   }
 } 

  function wheel(e) {
    preventDefault(e);
  }

  function disable_scroll() 
  {
    if (window.addEventListener) {
       window.addEventListener('DOMMouseScroll', wheel, false);
   }
    window.onmousewheel = document.onmousewheel = wheel;
     document.onkeydown = keydown;
  }

  function enable_scroll() 
  {
     if (window.removeEventListener) {
         window.removeEventListener('DOMMouseScroll', wheel, false);
    }  
    window.onmousewheel = document.onmousewheel = document.onkeydown = null;  
  }


  calendar.bind(mousewheelevt, function(e) 
  {
   var evt=window.event || e;
   var delta=evt.detail ? evt.detail*(-120) : evt.wheelDelta;

    if(delta > 0){   
      calendar.fullCalendar('next');        
    }
    if(delta < 0){              
      calendar.fullCalendar('prev');        
    }        
   });

    calendar.bind("mouseleave", function() 
    {
     enable_scroll();
    });

   calendar.bind("mouseenter", function() 
   {
     disable_scroll();
    });

Most of this code was copied from the net i have just adapt it to my problem.

This works in Chrome ( latest version ) and I.E ( lastest version ) Doesn´t work in Firefox ( lastest version )

Didn´t check in old versions of any of them.

Can anyone see the problem of not working in FF?

回答1:

I think i got it, its a bit hacky but it does the trick!!! Any constructive critics are welcome. This is now working in IE, Firefox, Chrome recent versions.

//This checks the browser in use and populates da var accordingly with the browser
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel";

//Prevents the scroll event for the windows so you cant scroll the window       
function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
      e.preventDefault();
  e.returnValue = false;  
}       

//I think this could be eliminated but in the examples i found used it  
function wheel(e) {
  preventDefault(e);        
}
//adds the scroll event to the window       
function disable_scroll(){
    if (document.attachEvent) //if IE (and Opera depending on user setting)
        document.attachEvent("on"+mousewheelevt, wheel);
    else if (document.addEventListener) //WC3 browsers
        document.addEventListener(mousewheelevt, wheel, false);                 
}   

//removes the scroll event to the window    
function enable_scroll() 
{
    if (document.removeEvent) //if IE (and Opera depending on user setting)
        document.removeEvent("on"+mousewheelevt, wheel);
    else if (document.removeEventListener) //WC3 browsers
        document.removeEventListener(mousewheelevt, wheel, false);  
}           

//binds the scroll event to the calendar's DIV you have made    
calendar.bind(mousewheelevt, function(e){
    var evt = window.event || e; //window.event para Chrome e IE || 'e' para FF
    var delta;          
    delta = evt.detail ? evt.detail*(-120) : evt.wheelDelta;                    
    if(mousewheelevt === "DOMMouseScroll"){
        delta = evt.originalEvent.detail ? evt.originalEvent.detail*(-120) : evt.wheelDelta;
    }           

 if(delta > 0){  
    calendar.fullCalendar('next');      
     }
     if(delta < 0){             
        calendar.fullCalendar('prev');      
     }  

});

//hover event to disable or enable the window scroll    
calendar.hover(
    function(){
        enable_scroll();
        console.log("mouseEnter");
    },
    function(){
        disable_scroll();
        console.log("mouseLeave");
    }
);

//binds to the calendar's div the mouseleave event      
calendar.bind("mouseleave", function() 
{
     enable_scroll();
});

//binds to the calendar's div the mouseenter event   
calendar.bind("mouseenter", function() 
{
     disable_scroll();
});

来源：https://stackoverflow.com/questions/19023419/fullcalendar-mousewheel-event-prev-next