如何处理日历事件中的dblclick和click事件

Question

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

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

我在eventRender函数中尝试过这样的方法，但没有成功。此外，将单击事件排除在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中有代码，dblcick就永远不会激发。有人知道我如何处理这两种类型的事件吗？

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