Fullcalendar mousewheel事件prev next [英] Fullcalendar mousewheel event prev next
本文介绍了Fullcalendar mousewheel事件prev next的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图在Fullcalendar（1.6.2）中做一个简单的思考，并且类似于Google日历，模拟上下滚动鼠标滚轮的prev和next按钮。
下面是我使用的代码，这段代码来自于我在这里的另一个问题，但我不记得那个：S
calendar.bind（'mousewheel'，function（event，delta）{
var view = calendar.fullCalendar（'getView'）;
/ /alert(view.name）; //可以成功检索视图名称
// alert（delta）; //未定义
// 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假;
}
$ b问题是增量是未定义
任何人都知道我做错了什么？我对Jquery或Javascript很陌生
编辑
var mousewheelevt =（/ Firefox / i.test（navigator.userAgent））？ DOMMouseScroll：mousewheel;
// left：37，up：38，right：39，down：40，
//空格键：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;
函数keydown（e）
{
for（var i = keys.length; i--;）{
if（e。 keyCode === keys [i]）{
preventDefault（e）;
return;
function wheel（e）{
preventDefault（e）;
$ b function disable_scroll（）
{
if（window.addEventListener）{
window.addEventListener（'DOMMouseScroll'，wheel，false）;
}
window.onmousewheel = document.onmousewheel = wheel;
document.onkeydown = keydown;
$ b函数enable_scroll（）
{
if（window.removeEventListener）{
window.removeEventListener（'DOMMouseScroll'，wheel，false）;
}
window.onmousewheel = document.onmousewheel = document.onkeydown = null;
$ b 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'）; $ （delta <0）{
calendar.fullCalendar（'prev'）;
}
}）; b $ b}
;
calendar.bind（mouseleave，function（）
{
enable_scroll（）;
}）;
$ b calendar.bind（mouseenter，function（）
{
disable_scroll（）;
}）;
这段代码大部分都是从网上复制过来的，只是适应了我的问题。 b
$ b
这适用于Chrome（最新版本）和IE（最新版本）
不适用于Firefox（最新版本）
没有检查其中任何版本的旧版本。
任何人都可以看到在FF中无法工作的问题吗？ 方案
我想我知道了，它有点冒险，但它确实有效！任何建设性的批评都是受欢迎的。这是现在在IE浏览器，火狐浏览器，铬最近版本。
//这将检查使用的浏览器并相应地填充da var与浏览器
var mousewheelevt =（/ Firefox / i.test（navigator.userAgent））？ DOMMouseScroll：mousewheel;
//防止窗口的滚动事件，所以你不能滚动窗口
function preventDefault（e）{
e = e || window.event;
if（e.preventDefault）
e.preventDefault（）;
e.returnValue = false;
}
//我认为这可以被消除，但在我发现的例子中使用了
函数轮（e）{
preventDefault（e）;
}
//将滚动事件添加到窗口
function disable_scroll（）{
if（document.attachEvent）//如果IE（和Opera取决于用户设置）
document.attachEvent（on+ mousewheelevt，wheel）;
else if（document.addEventListener）// WC3浏览器
document.addEventListener（mousewheelevt，wheel，false）;
//将滚动事件移至窗口
函数enable_scroll（）
{
if（document.removeEvent）// if IE（和Opera取决于用户设置）
document.removeEvent（on+ mousewheelevt，wheel）;
else if（document.removeEventListener）// WC3浏览器
document.removeEventListener（mousewheelevt，wheel，false）;
}
//将滚动事件绑定到您创建的日历DIV
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;
} $ b （delta> 0）{
calendar.fullCalendar（'next'）;
}
if（delta< 0）{
calendar）
$ b。 fullCalendar（'prev'）;
}
}）;
$ b $ // hover event禁用或启用窗口滚动
calendar.hover（
function（）{
enable_scroll（）;
console.log （mouseEnter）;
}，
function（）{
disable_scroll（）;
console.log（mouseLeave）;
}
）;
绑定日历的div mouseleave事件
calendar.bind（mouseleave，function（）
{
enable_scroll（）;
}）;
绑定到日历的div mouseenter事件
calendar.bind（mouseenter，function（）
{
disable_scroll（）;
}）;
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?
解决方案
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();
});
这篇关于Fullcalendar mousewheel事件prev next的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
