2013-09-26 22 views
0

我試圖做一個簡單的認爲Fullcalendar(1.6.2),是模擬prev和next按鈕throught鼠標滾輪上下,類似於谷歌日曆。Fullcalendar鼠標滾輪事件上頁下頁

這裏是我使用的代碼,這個代碼是從這裏另外一個問題我想,但我不能記住至極之一:■

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; 
} 

});

的問題是增量是未定義

任何人有什麼線索,我做錯了?我很新jQuery的或Javascript

編輯

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(); 
    }); 

大部分代碼是從網上我剛纔使其適應我的問題複製。

此作品在Chrome(最新版本),並即(最新版本)在Firefox Doesn't工作(最新版本)的舊版其中任何

Didn't檢查。

任何人都可以看到FF不工作的問題?

+1

您使用鼠標滾輪插件? https://github.com/brandonaaron/jquery-mousewheel – dev

+0

不,我不包括這個插件,我一定要? –

+0

沒關係我看到的代碼,我有:P –

回答

1

我覺得我得到它,它有點哈克,但它的伎倆!任何建設性的批評都是受歡迎的。這是現在在IE,Firefox,Chrome最近的版本。

//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(); 
});