一次点击，两次'单击'事件已启动

one click, two 'click' event fired

本文关键字：单击 事件 启动 两次 一次      更新时间：2023-09-26

我只想在点击链接时切换一些元素：

这就是我的尝试（但我真的不认为这对这个问题有多重要，事件函数回调中有什么）：

/* mostrar exceso de comentarios a peticion del usuario*/
$('.toggleComments').click(function(){
        console.log('.toggleComments');
        if($(this).parents('.helpContent').find('.commentHideble:visible').length > 0){
            $(this).text('+ <?=get_texto_clave('show_old_comments')?>').removeClass('toggleCommentsActive').append(' ('+$(this).parents('.helpContent').find('.commentHideble:not:visible').length+'+)');
        }else{
            $(this).text('- <?=get_texto_clave('hide_old_comments')?>').addClass('toggleCommentsActive');
        }
        $(this).parents('.helpContent').find('.commentHideble').slideToggle(100);
});

我甚至尝试了一个布尔值，但给了我相同的结果

/* mostrar exceso de comentarios a peticion del usuario*/

var ctoggle = false;
$('.toggleComments').click(function(){
    if(ctoggle == false){
        ctoggle = true;
        console.log('.toggleComments');
        if($(this).parents('.helpContent').find('.commentHideble:visible').length > 0){
            $(this).text('+ <?=get_texto_clave('show_old_comments')?>').removeClass('toggleCommentsActive').append(' ('+$(this).parents('.helpContent').find('.commentHideble:not:visible').length+'+)');
        }else{
            $(this).text('- <?=get_texto_clave('hide_old_comments')?>').addClass('toggleCommentsActive');
        }
        $(this).parents('.helpContent').find('.commentHideble').slideToggle(100);
        ctoggle = false;
    }
});

为什么日志被点击两次？

看起来页面中有两次相同的jQuery块。两次绑定=两次点火。

第499行和第1481行。

一个jsfiddle页面可能很有用，但同时你可以尝试一下：

$('.toggleComments').click(function(e){
    e.stopPropagation(); 
    console.log('.toggleComments');
    if($(this).parents('.helpContent').find('.commentHideble:visible').length > 0){
        $(this).text('+ <?=get_texto_clave('show_old_comments')?>').removeClass('toggleCommentsActive').append(' ('+$(this).parents('.helpContent').find('.commentHideble:not:visible').length+'+)');
    }else{
        $(this).text('- <?=get_texto_clave('hide_old_comments')?>').addClass('toggleCommentsActive');
    }
    $(this).parents('.helpContent').find('.commentHideble').slideToggle(100);
}

由于您使用的是类选择器，所以单击事件在多个元素上冒泡/传播的可能性不大，所有元素都使用toggleComments类。e.stopPropagation()应该对您的情况有所帮助。

preventDefault会停止单击本身，因此如果元素是超链接，则最好不要使用该方法。如果它只是一个div、span或其他什么，那么您总是可以返回false。在jQuery中，返回false将停止事件传播/冒泡，将阻止默认值。

相关文章：