Single click interfering with double click. How can resolve this?

Question

I have a problem where my single click events keep interfering with my double click event such that even though I double clicked, the single click event gets called.

Here's my code before a solution I found on SO:

grid.bind('change', function() {
    SearchPSelected();
});

$('#PGrid').delegate('tbody>tr', 'dblclick', function(e) {
    SearchPSelected();
    GotoNextView();
});

Here's my code after I followed a solution on SO:

grid = $('#PGrid').data('kendoGrid');

var DELAY = 700,
    clicks = 0,
    timer = null;

grid.on("click", function(e) {
        clicks++; //count clicks

        if (clicks === 1) {
            timer = setTimeout(function() {

                grid.bind('change', function() {
                    SearchPSelected();
                }); //perform single-click action    

                clicks = 0; //after action performed, reset counter
            }, DELAY);
        } else {
            clearTimeout(timer); //prevent single-click action

            $('#PGrid').delegate('tbody>tr', 'dblclick', function(e) {
                SearchPSelected();
                GotoNextView();
            }); //perform double-click action

            clicks = 0; //after action performed, reset counter
        }
    })
    .on("dblclick", function(e) {
        e.preventDefault(); //cancel system double-click event
    });

With the attempted solution, nothing gets called (with inspection from firebug) and I'm not sure why? I'm still relatively new to js (not my language of choice), so I could be missing something?

http://stackoverflow.com/questions/6330431/jquery-bind-double-click-and-single-click-separately/7845282#7845282 — epascarello, Dec 30 '14 at 22:12
Right - using "click" and "doubleclick" on the same element just doesn't work very well in web user interfaces. — Pointy, Dec 30 '14 at 22:12
what do you mean? So I can't have a single element posses different actions for single click and double click? I tried a solution on SO but it doesn't work for me. — Kala J, Dec 30 '14 at 22:16
You can have both, but both events will fire. That is how it is designed to work. — epascarello, Dec 30 '14 at 22:17
The problem with the first attempt above is, my single click event interfering with double click. So the double click event never gets called! How do I fix this? — Kala J, Dec 30 '14 at 22:20

score 0 · Accepted Answer · answered Dec 31 '14 at 16:01

I figured out my problem. Here's the fix is below. I had to remove the redundancy of the click and dblclick methods inside the solution above.

        var DELAY = 700,
        clicks = 0,
        timer = null;

        $('#PGrid').delegate('tbody>tr','click', function (e) {
            clicks++; //count clicks

            if (clicks === 1) {
                timer = setTimeout(function () {

                        SearchPSelected();

                    clicks = 0; //after action performed, reset counter
                }, DELAY);
            } else {
                clearTimeout(timer); //prevent single-click action

                    SearchSelected();
                    GotoNextView();

                clicks = 0; //after action performed, reset counter
            }
        });

Single click interfering with double click. How can resolve this?

1 Answers1