jQuery实现三按钮交互时点击移除后已添加按钮仍显示的问题如何解决？

点击remove按钮时，click事件回调会先将remove按钮设置为display:none。此时浏览器检测到鼠标下方无对应元素，会将remove的mouseleave事件加入任务队列，等当前同步代码执行完成后再触发。而原有mouseleave回调会错误执行.added按钮的显示逻辑，最终导致两个按钮同时显示。

在.remove的mouseleave事件开头增加可见性判断：如果本次mouseleave是由代码隐藏按钮触发（而非用户主动鼠标移出），直接跳过原有逻辑即可。改动量极小，完全适配原有交互逻辑。

修改后的完整代码：

$(document).on('click', '.add_to_cart', function(e){
    e.preventDefault();
    $(this).hide();
    $(this).closest('div.action_buttons').find('.added').show();
});

$(document).on('mouseenter', '.added', function(e){
    $(this).hide();
    $(this).closest('div.action_buttons').find('.remove').show();
});

$(document).on('mouseleave', '.remove', function(e){
    // 新增判断：按钮已被隐藏时直接跳过
    if (!$(this).is(':visible')) return;

    $(this).hide();
    $(this).closest('div.action_buttons').find('.added').show();
});

$(document).on('click', '.remove', function(e){
    e.preventDefault();
    $(this).hide();
    $(this).closest('div.action_buttons').find('.add_to_cart').show();
});

逻辑验证 #

• 用户自然移出remove按钮时，remove仍处于可见状态，判断条件不成立，正常执行原有逻辑，隐藏remove并显示added，符合需求。
• 用户点击remove按钮时，click事件先将remove隐藏，后续触发的mouseleave事件命中判断条件直接跳过，不会显示added，最终仅显示add_to_cart按钮，符合预期。

注：代码中将原有closest('div')调整为closest('div.action_buttons')，避免匹配到外层无关div，提升严谨性。

如果后续交互逻辑会扩展，可封装统一的状态切换函数，避免多按钮状态混乱：

// 封装统一状态设置函数
function setButtonState($container, state) {
    // 每次先隐藏所有按钮，从根源避免多按钮同时显示
    $container.find('button').hide();
    switch(state) {
        case 'cart':
            $container.find('.add_to_cart').show();
            break;
        case 'added':
            $container.find('.added').show();
            break;
        case 'remove':
            $container.find('.remove').show();
            break;
    }
}

$(document).on('click', '.add_to_cart', function(e){
    e.preventDefault();
    setButtonState($(this).closest('div.action_buttons'), 'added');
});

$(document).on('mouseenter', '.added', function(e){
    setButtonState($(this).closest('div.action_buttons'), 'remove');
});

$(document).on('mouseleave', '.remove', function(e){
    if (!$(this).is(':visible')) return;
    setButtonState($(this).closest('div.action_buttons'), 'added');
});

$(document).on('click', '.remove', function(e){
    e.preventDefault();
    setButtonState($(this).closest('div.action_buttons'), 'cart');
});

内容的提问来源于stack exchange，提问作者user765368