如何处理日历事件上的 dblclick 和单击事件

Question

我试图在 fullCalendar 中单击一个事件时执行一项操作，并在双击同一事件时执行另一项操作，并且在 dblClick 上触发单击事件时遇到问题。

我想通过单击更改一系列事件的边框颜色，并通过双击打开编辑对话框。

我已经在这样的 eventRender 函数中尝试过，但没有奏效。此外，将 click 事件排除在 eventRender 之外并使用 eventClick 函数进行单击，它的行为方式相同。

        element.bind('dblclick', function(ev) {
            editEvent(event,element,view);
            alert('double click!');
        });
        element.bind('click', function(ev) {
            var eventSeries=$('#calendar').fullCalendar('clientEvents', event.id);
            $(eventSeries).each(function(){this.borderColor='red'});
            $('#calendar').fullCalendar('updateEvent', eventSeries);
            alert('single click!');
        });

当 eventClick 或 click 绑定中没有任何内容时，dblclick 可以正常触发，但是一旦我在 click 绑定或 eventClick 中有代码，dblclick 就永远不会触发。有谁知道我如何处理这两种类型的事件？

Answer 1

您可以滚动自己的单击/双击事件，本质上，在用户尝试双击时，给用户足够的时间完成第二次单击后，使用 setTimeout 触发单击事件。

这是小提琴：http://jsfiddle.net/wfG6k/

$button.bind( 'click', function( event ) {

    var doubleClickOpportunity = 200, // Adjust this to whatever feels right
        $elem = $( event.target ),
        clicker = $elem.data( 'clicker' ); // Holder for the doubleclick setTimeout

    if ( clicker ) {
        // If there's a setTimeout stored in clicker, then this is a double click
        clearTimeout( clicker );
        $elem.data( 'clicker', '' );
        $elem.trigger( 'doubleclick' );
    } else {
        // Otherwise, it's either a single click or the beginning of a double click

        // So set a timer to decide which it is - if the timer runs out,
        // it's just a single click.
        $elem.data( 'clicker', setTimeout(function() {
            $elem.data( 'clicker', '' );
            $elem.trigger( 'singleclick' );
        }, doubleClickOpportunity ));
    }

});

$button.bind( 'singleclick', function() {
    // I'm a single click!
});

$button.bind( 'doubleclick', function() {
    // I'm a double click!
});