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

除非您有不可避免的原因，否则您应该使用“click”事件而不是“mousedown”。但是当用户开始按下鼠标按钮或屏幕时会发生“mousedown”或“touchstart”事件，并且在您释放按钮并再次按下它之前不会触发该事件。

所以我假设您正在使用具有宏软件的喋喋不休鼠标或鼠标。将事件更改为“click”，看看它是否有效，如果“点击”事件无法解决问题，请尝试使用其他鼠标。

仅供参考，强调方法_.throttle或_.debounce可能有助于支持喋喋不休的老鼠。

throttle_.throttle（功能，等待，[选项]）

创建并返回传递函数的新的受限制版本，当重复调用时，每隔等待毫秒最多只调用一次原始函数。对于速度限制事件非常有用，这些事件的发生速度比您能跟上的速度要快。

debounce_.debounce（功能，等待，[立即]）

创建并返回传递函数的新debounced版本，该版本将推迟执行，直到自上次调用之后经过等待毫秒。用于实现仅在输入停止到达后才会发生的行为。例如：渲染Markdown注释的预览，在窗口停止调整大小后重新计算布局，等等。

http://underscorejs.org/

Answer 2

如果您想使用“委派”事件处理程序而不是“直接”事件处理程序来冒泡事件，请尝试使用比$(document)更具体的目标选择器，例如$('.some-class')其中{ {1}}是some-class元素正上方的类名。

我还会使用mouseup或click事件来避免在按住鼠标时触发#prev事件。

根据API：

大多数浏览器事件从最深处传播或传播文档中最里面的元素（事件目标）一直到身体和文档元素。

试试这个：

mousedown

您可能需要检查HTML以查看您是否多次使用// delegated "click" listener using a more specific target selector $('.some-class').on('click', '#prev', function(event) {})。通常，只需在目标ID元素上创建侦听器就可以正常工作。

#prev

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

jQuery - 事件委托多次发生

3 个答案: