Tabulator: RowClick fires always, even if dblClick has preventDefault

[mchiacchio]

Hello! First of all, wanted to say your library is great. One of the most complete table plugins ever.

Said that, we're having some issues with RowClick events.

The situation is this:
We have a table with both RowClick and RowDblClick events configured.
We want to display a detail of the row on a panel on RowClick, and open the record on RowDblClick

The problem is both events fires. The RowClick event is fired even if RowDblClick prevents the execution the bubble using e.preventDefault() or e.stopPropagation() or return false. It evens triggers before RowDblClick

Is there any workaround for this. Maybe a dblClick time span before firing RowClick?

We're using Tabulator v4.1. If needed we can provide a code sample

Looking forward to your answer!
Best Regards

[olifolkerd]

Hey @mchiacchio

Thanks for your kind words, it is great to hear you are enjoying using Tabulator.

That is actually a limitation of the way that JavaScript handles click and double click events rather than Tabulator specific.

Using e.stopPropagation() wont work because the click event has already fired before the double click event is fired (if you put a console.log in the callbacks you can see the order in which they fire.

The usual way round this is to put a 300ms delay in the click callback that is cleared by the dbl click event if it happens. something like this:

//holder for click block timeout timeout
var clickBlockTimer = null;

//define table outside of function and assign to table variable
var table = new Tabulator("#json-table", {
    columns:[..clumn go here...],
    rowClick:function(e, row){
        clickBlockTimer = setTimeout(function(){
            //do whatever you need to on click
        }, 300);
    },
    rowDblClick:function(e, row){
        //prevent click function from running
        clearTimeout(clickBlockTimer);

        //do whatever you need to on dbl click
    },
})

Let me know if that helps,

Cheers

Oli :)

[JimSmithJr]

Hey Oli,

Awesome library. I agree mchiacchio!! Tabulator out performs and has more and better functionality that most of the commercial libraries out there.

If I may comment on the above, I did find the second click in the double click was still firing. So borrowing from your example I added a clicks counter so if the double click was detected and the timeout prevent the first single click from firing the clicks counter would prevent the second click from also firing.

//holder for click block timeout timeout
var clickBlockTimer = null;
var clicks = 0; -- handles the second click in a double click;

//define table outside of function and assign to table variable
var table = new Tabulator("#json-table", {
columns:[..clumn go here...],
rowClick:function(e, row){
clickBlockTimer = setTimeout(function(){
if (clicks == 0) { -- will only execute if the clicks var was not incremented by the double click.
//do whatever you need to on click
}
else
{
clicks = 0;
}
}, 300);
},
rowDblClick:function(e, row){
//prevent click function from running
clearTimeout(clickBlockTimer);
clicks += 1; -- increments to prevent the second click from executing.
//do whatever you need to on dbl click
},
})

The above is how I solved the double click vs single click. Please let me know if this did not solve for anyone else.

Thanks so much,
Jim