jQuery点击事件一次点击触发多次

jQuery click event triggered multiple times off one click

本文关键字：一次 事件 jQuery      更新时间：2023-09-26

当只点击了一个元素时，我在jQuery中注册多次点击时遇到了问题。我已经阅读了Stack Overflow上的一些其他线程，试图解决它，但我认为这是我写的代码。HTML代码无效，但这是由一些HTML5和使用YouTube嵌入代码引起的。没有影响单击的内容。

在document.ready 上触发的jQuery

function setupHorzNav(portalWidth) {
    $('.next, .prev').each(function() {
        $(this).click(function(e) {
            var target = $(this).attr('href');
            initiateScroll(target);
            console.log("click!");
            e.stopPropagation();
            e.preventDefault();
            return false;
        });
    });
    function initiateScroll(target) {
        var position = $(target).offset();
        $('html, body').animate({
            scrollLeft: position.left
        }, 500);
    }
}

HTML 示例

<nav class="prev-next">
    <a href="#countdown-wrapper" class="prev">Prev</a>
    <a href="#signup-wrapper" class="next">Next</a>
</nav>

在Firefox中，一次点击可以记录16次"点击！"！Chrome只看到一个，但两个浏览器都显示了上述代码的问题。

我是不是写错了代码，还是有bug？

--一些额外信息--------------------------------------------

setupHorzNav是由我代码中的另一个函数调用的。我已经对此进行了测试，并确认它在初始负载时只调用一次。

if ( portalWidth >= 1248 ) {
    wrapperWidth = newWidth * 4;
    setupHorzNav(newWidth);
}
else
{
    wrapperWidth = '100%';
}

导航"上一个"有多个实例。所有的目标都是不同的锚。所有这些都在同一个html页面中。

<nav class="prev-next">
    <a href="#video-wrapper" class="prev">Prev</a>
</nav>

尝试像这样取消绑定点击事件

$(this).unbind('click').click(function (e) {    
});

绑定事件处理程序不需要.each()。试试这个：

$('.next, .prev').click(function(e){
        var target = $(this).attr('href');
        initiateScroll(target);
        console.log("click!");
        e.stopPropagation();
        e.preventDefault();
        return false;
});

编辑：我认为是您从setupHorzNav函数中附加事件处理程序的方式导致了它。从$(document).ready()之类的函数中更改为只附加一次。

通过从事件处理程序调用的函数中附加事件处理程序，我成功地获得了多个事件处理程序的情况。其效果是单击事件处理程序的数量随着每次单击而呈几何级数增加。

这是代码：（和jsfiddle演示）

function setupNav() {
    $('.next, .prev').each(function () {
        $(this).click(function (e) {
            setupNav();
            var target = $(this).attr('href');
            console.log("click!");
            e.stopPropagation();
            e.preventDefault();
            return false;
        });
    });
}
setupNav();

查看如何从单击事件处理程序调用setupNav()函数在连续单击时添加多个事件处理程序（以及click日志消息）

由于您的问题不清楚您是否多次调用绑定函数，因此快速而肮脏的修复方法是：

$('.next, .prev').unbind('click').click(function() {
    ...
});

这里要做的是取消绑定以前为click绑定的任何事件处理程序，然后重新绑定。

其他地方没有其他点击绑定吗？

你正在用ajax加载页面吗？

你也可以试试这个：

$('.next, .prev').click(function (e) {
    var target = $(this).attr('href');
    initiateScroll(target);
    console.log("click!");
    e.stopPropagation();
    e.preventDefault();
    return false;
});
相关文章：