点击jquery confirm取消按钮后，如何移除feedback span的焦点？

我完全懂你遇到的这个麻烦——点击#feedback弹出确认框，取消后焦点又回到这个元素上，导致tippy的提示框自动弹出来，试了blur()也没效果。这是因为tippy默认会监听元素的focus事件，而jquery confirm关闭后会把焦点返还给触发元素，再加上tippy内部的状态没及时更新，所以单纯的blur()没法彻底搞定这个问题。

这里有个靠谱的解决方案，核心是获取tippy实例并手动控制它的显示状态，再配合blur()让元素失去焦点：

修改后的完整代码 #

$(document).ready(function() {
    // 保存tippy实例，方便后续调用内置方法
    const feedbackTippy = tippy('#feedback', {
        placement: 'right',
        arrow: true,
        content: "Share your feedback."
    });

    $('#feedback').click(function() {
        // 点击时先隐藏tippy，避免弹窗和提示框同时显示
        feedbackTippy.hide();
        
        $.confirm({
            title: 'Feedback',
            useBootstrap: false,
            content: '' +
                '<form action="" class="formName">' +
                '<div class="form-group">' +
                '<input type="text" class="name form-control" required />' +
                '</div>' +
                '</form>',
            buttons: {
                formSubmit: {
                    text: 'Send Feedback',
                    btnClass: 'btn-blue',
                    action: function() {
                        // 这里可以添加提交逻辑
                    }
                },
                cancel: function() {
                    // 让元素失去焦点
                    $("#feedback").blur();
                    // 手动强制隐藏tippy提示框
                    feedbackTippy.hide();
                }
            }
        });
    });
});

为什么这个方案有效？ #

• 我们把tippy实例赋值给了变量feedbackTippy，这样就能直接调用tippy官方提供的hide()方法，强制关闭提示框，比单纯依赖blur()更可靠；
• 点击#feedback时先调用hide()，可以避免弹窗弹出时，tippy提示框还停留在页面上的尴尬情况；
• 取消按钮的回调里，先让元素失去焦点，再手动隐藏tippy，双重保险确保提示框不会再意外出现。

另外，如果你想从根源上避免这个问题，也可以修改tippy的触发方式，比如只让它在鼠标悬停时显示：

const feedbackTippy = tippy('#feedback', {
    placement: 'right',
    arrow: true,
    content: "Share your feedback.",
    trigger: 'mouseenter' // 只监听鼠标进入事件，移除focus触发
});

这样就算元素重新获得焦点，tippy也不会自动弹出提示框了，你可以根据自己的需求选择合适的方案。

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