我试图在Fullcalendar(1.6.2)中做一个简单的思考,并通过鼠标滚轮上下模拟上一个和下一个按钮,类似于谷歌日历。
这是我正在使用的代码,这段代码来自我认为的另一个问题,但我不记得哪一个: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; }
});
问题是delta是未定义的
任何人都知道我做错了什么? 我是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(最新版本)和IE(最新版本)在Firefox中无效(最新版本)
没有检查其中任何一个的旧版本。
谁能看到不在FF工作的问题?
我想我得到了它,它有点hacky但它确实有把戏! 欢迎任何建设性的批评者。 这是现在在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(); });
以上就是jQuery教程分享Fullcalendar鼠标滚轮事件prev next相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。
本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址:https://www.ctvol.com/jquerytutorial/547808.html