按下回车键触发SweetAlert2弹窗时弹窗闪现就消失的问题

核心问题分析 #

弹窗闪现消失的主要原因有两个：

• 原代码存在语法错误，导致事件触发逻辑异常
• 回车键的默认浏览器行为未被阻止（比如按钮在表单中时，回车会触发表单提交刷新页面；即使不在表单，按钮的默认回车动作也可能干扰弹窗显示）

第一步：修复原代码中的语法错误 #

原detectspecialkeys函数存在两处关键错误：

1. 未正确获取事件对象的code属性，直接使用未声明的code变量
2. jQuery选择器语法错误，$(#selid)应为$(selid)（selid是已拼接好的字符串变量，无需额外引号）

修复后的函数代码：

function detectspecialkeys(e) {
  var evtobj = window.event ? event : e;
  console.log('Event: ', evtobj);
  console.log('Code: ' + evtobj.code);
  console.log('Repeat: ' + evtobj.repeat);
  
  if (evtobj.repeat) {
    return;
  }
  
  // 修复：使用evtobj.code替代未声明的code变量
  if ((evtobj.code === 'Space') || (evtobj.code === 'Enter')) {
    console.log('EObj-Sp/Return: ', evtobj.target);
    if (evtobj.target.nodeName === 'BUTTON') {
      console.log('Inside Button');
      var selid = '#' + evtobj.target.id;
    }
    // 修复：使用变量selid作为选择器
    $(selid).trigger('singletap');
    
    // 关键：阻止回车键/空格键的默认行为
    evtobj.preventDefault();
    evtobj.stopPropagation();
  }
}
document.onkeydown = detectspecialkeys;

第二步：优化singletap事件处理（可选增强） #

虽然原事件处理逻辑基本正常，但可以补充对触发源的判断，确保事件行为一致：

$('#selid').on('singletap', function(e) {
  console.log('Inside Singletap');
  e.preventDefault();
  e.stopPropagation();
  
  swal('Test').catch(swal.noop);
  return false;
});

额外注意事项 #

• 如果按钮位于<form>标签内，建议给表单添加onsubmit="return false"，彻底阻止表单默认提交行为
• 检查是否有其他全局键盘事件监听逻辑，可能与当前事件处理冲突

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