jQuery - Делегирование событий происходит несколько раз

Question

Я использую делегирование событий в разбивке на страницы для моего сайта. Когда вы нажимаете кнопки < или >, он перемещает страницу вверх или вниз. Проблема в том, что если вы не отпустите кнопку мыши, то в разделенную секунду она будет продолжать повторять обработчик кликов.

Как это сделать, чтобы это событие происходило только один раз за клик? Вот мой код:

$(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

Если вы хотите использовать «делегированное» обработчик событий, а не «прямой» обработчик событий пузыриться событие, попробуйте использовать более конкретный селектор цели, чем $(document) как $('.some-class') где some-class это имя класса непосредственно над элементом #prev.

Я бы также использовал либо события mouseup, либо click, чтобы избежать обстрела события mousedown, когда нажата кнопка мыши.

Согласно API:

Большинство из браузера событий пузыря, или распространяться, от самих глубоких, внутреннего элемента (целей события) в документе, где они происходят вплоть до тело и элемент документа.

Попробуйте это:

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

Вы можете проверить HTML, чтобы увидеть, если вы используете #prev несколько раз. Обычно просто создание слушателя на целевом идентификационном элементе должно работать нормально.

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

Answer 2

Вы должны использовать «click» событие вместо «mousedown», если у вас есть неизбежная причина. Но «mousedown» или «touchstart» событие происходит, когда пользователь начинает нажимать кнопку или экран мыши, и он не будет запущен, пока вы не отпустите кнопку и не нажмете ее еще раз.

Итак, я предполагаю, что вы используете болтающую мышь или мыши, у которых есть программное обеспечение для макросов. измените событие на «click» и посмотрите, работает ли оно, и в случае, когда событие «click» не решит проблему, попробуйте использовать другую мышь.

FYI, методы подчеркивания _.throttle или _.debounce могут помочь поддерживать болтающие мыши.

throttle_.throttle (функция, подождите, [опция])

Создает и возвращает новый, задушила версию переданной функции, что при вызове неоднократно, только на самом деле назвать исходную функцию в большинстве один раз за каждые миллисекунды ожидания. Полезно для событий ограничения скорости, которые происходят быстрее, чем вы можете не отставать.

---

debounce_.debounce (функция, wait, [немедленная])

Создает и возвращает новую дебренную версию переданной функции, которая отложит ее выполнение до тех пор, пока не истечет время ожидания миллисекунд с момента последнего вызова. Полезно для реализации поведения, которое должно произойти только после того, как вход остановился. Например: рендеринг предварительного комментария Markdown, пересчет макета после того, как окно перестало изменяться, и так далее.

http://underscorejs.org/

Answer 3

Я не нашел ответ на этот вопрос, но я нашел решение, которое устраняет эту проблему. То, что я сделал добавляется условное, что позволяет только событие щелчка происходить один раз за клик:

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