jQuery - Event delegation is occuring multiple times

Question

I'm using event delegation in the pagination for my website. When you click the < or > buttons it moves the page up or down. The problem is that if you don't release the mouse button, in a split-second it will keep repeating the click handler.

How can I make it so that this event only occurs once per-click? Here's my code:

$(document).on('mousedown', '#prev', function(event) {
    // Page is the value of the URL parameter 'page'
    if (page != 1) {
        page--;
        var state = {
          "thisIsOnPopState": true
        };
        history.replaceState(state, "a", "?page=" + page + "");
    }
    // Refresh is a custom function that loads new items on the page
    refresh();
});

Answer 1

You should use "click" event instead of "mousedown" unless you have a unavoidable reason. But "mousedown" or "touchstart" event occurs when a user start pressing the mouse button or screen and it will not be fired until you release the button and press it again.

So I assume you are using a chattering mouse or mouses which has macro software. change event into "click" and see if it works and in the case "click" event is not gonna solve the issue,try using another mouse.

FYI,underscore methods _.throttle or _.debounce might help to support chattering mouses.

throttle_.throttle(function, wait, [options])

Creates and returns a new, throttled version of the passed function, that, when invoked repeatedly, will only actually call the original function at most once per every wait milliseconds. Useful for rate-limiting events that occur faster than you can keep up with.

---

debounce_.debounce(function, wait, [immediate])

Creates and returns a new debounced version of the passed function which will postpone its execution until after wait milliseconds have elapsed since the last time it was invoked. Useful for implementing behavior that should only happen after the input has stopped arriving. For example: rendering a preview of a Markdown comment, recalculating a layout after the window has stopped being resized, and so on.

http://underscorejs.org/

Answer 2

If you want to use a "delegated" event handler rather than a "direct" event handler to bubble up the event, try to use a more specific target selector than $(document) like $('.some-class') where some-class is the class name directly above the #prev element.

I would also use either the mouseup or click events instead to avoid the mousedown event firing while the mouse click is held down.

According to the API:

The majority of browser events bubble, or propagate, from the deepest, innermost element (the event target) in the document where they occur all the way up to the body and the document element.

Try this:

// delegated "click" listener using a more specific target selector
$('.some-class').on('click', '#prev', function(event) {})

You may want to check your HTML to see if you are using #prev multiple times. Usually, just creating the listener on the target ID element should work fine.

// direct "click" listener on an ID element
$('#prev').on('click', function(event) {})

Answer 3

I haven't found the answer to this question, but I have found a solution that fixes the problem. What I have done is added a conditional that only allows the click event to occur once-per-click:

var i = 0;

$(document).on('click', '#prev', function(event) {
    if (page != 1 && i === 0) {
        page--;
        var state = {
          "thisIsOnPopState": true
        };
        history.replaceState(state, "a", "?page=" + page + "");
        i = 1;
        refresh();
    }
});

// Resets 'i' for the next click
$(document).on('mouseup', function() {
    i = 0;
});