如何在全日历中禁用按钮冒泡？

Question

Fullcalendar 版本是 3.9.0。

当我双击左上角的“上一个”或“下一个”按钮时，视图将向后或向前两个月。没关系。但是在这种情况下，通过 Promise 检索到的视图中的事件是重复的。快速点击后，它们甚至会变成三倍。

我尝试使用'event.stopPropagation();' 停止事件冒泡但没有运气。将事件 dblclick 事件转换为单击后，Fullcalendar 似乎没有相应的响应。如果触发双击，可能会跳到下一年或上一年。它仍然跳过几个月并显示重复的事件。

$("button[aria-label='prev']").on('dblclick', function(e) {

    e.stopPropagation();

});

在 Fullcalendar 中检索事件，请找到以下代码。

$('#calendar').fullCalendar({ 

    theme: true,

        header: {

        left: 'prev,next today',

        center: 'title',

        right: 'month,agendaWeek,agendaDay,listMonth,listYear'

        },

    viewRender : function(view, element) {     

        viewRenderInit(view, element);

    },

    ... 

});

//when switch/init view, only get events related to current calendar view

let viewRenderInit = function (view, element) {

    $('#calendar').fullCalendar( 'removeEvents');

    let u = '/getbookings';

    let r = '';

    let _common_params = '_token='+$("[name=\'_token\']").val()+'&view='+view.name+'&time_frame='+ view.title;

    get(u, _common_params).then(function(response) {

        r = response;

        $('#calendar').fullCalendar( 'addEventSource', JSON.parse(r));

    }, function(error) {

        console.error("Failed!", error);

    });

}

let get = function(url, params) {

    return new Promise(function(resolve, reject) {    

        var req = new XMLHttpRequest();

        req.open('GET', url+"?"+params, true);

        req.onload = function() {      

            if (req.status == 200) {       

                resolve(req.response);

            }

            else {        

                reject(Error(req.statusText));

            }

        };

        req.onerror = function() {

            reject(Error("Network Error"));

        };

        req.send();

    });

}

我希望为按钮“上一个”或“下一个”禁用事件 dblclick。或者，禁止通过 Ajax 调用通过 Promise 检索重复事件。

Answer 1

您可以考虑简单地关闭事件处理程序，然后在一两秒钟后重新绑定它。$("button[aria-label='prev']").on('click', function(e) {    $("button[aria-label='prev']").off();    //the rest of your function here    setTimeout(function() {      //rebind the original function      $("button[aria-label='prev']").on('click', yourOriginalFunction);    }, 3000);});