如何只在第一次单击时触发jquery单击事件

Question

我有两个div(.basic1和.basic2).我希望.basic1在点击时淡出,而.basic2在淡入淡出,我工作得非常好.唯一的问题是,一旦.basic2淡入,如果用户继续点击链接(.navbar1),它将一遍又一遍淡入此div.我知道我需要使用.bind()函数,但我似乎无法弄清楚我的代码中的位置.谢谢!

$(document).ready(function() {
    $('.navbar1').click(function(e){
        e.preventDefault();

        $('.basic2').hide().load('.basic2', function() {
            $(this).delay(600).fadeIn(1000);
            $('.basic1').fadeOut(1000);
        });
    });
});

Answer 1

用途.one():

$('.navbar1').one('click', function(e) {

click一旦触发它,它就会取消绑定事件.

如果你不想双击一个元素,这样的东西应该工作:

$(document).on('click', '.navbar1:not(.clicked)', function() {
    // ...
});

要使.navbar1无法点击,只需运行$('.navbar1').addClass('clicked').要使其可点击,请执行相反的操作.

Answer 2

请参阅jQuery one()以获取一次性事件处理程序.即

$(document).ready(function() {
    $('.navbar1').one('click', function(e){
        e.preventDefault();

        $('.basic2').hide().load('.basic2', function() {
            $(this).delay(600).fadeIn(1000);
            $('.basic1').fadeOut(1000);
        });
    });
});

Answer 3

jQuery 完全为此提供了.one()方法.

$(document).ready(function() {
    $('.navbar1').one('click', function(e){
        e.preventDefault();
        $('.basic2').hide() 
        .load('.basic2', function() {
            $(this).delay(600).fadeIn(1000);
            $('.basic1').fadeOut(1000);
        });
    });
});

Answer 4

通过“一次”使用现代Js事件！

const navbar = document.getElementsByClassName("navbar1")[0];
navbar.addEventListener("click", function() {
    // Add one-time callback
}, {once : true});

文档，可以使用