Mozilla ESR中onblur未完成即执行onclick的技术问题求助

我太懂你这个糟心的问题了——在Mozilla ESR浏览器里，当输入框填了不符合规则的内容后直接点Save链接，onblur的验证逻辑还没跑完，页面就直接跳走了；但Chrome、Safari和IE都能乖乖等验证完成再执行保存。这完全是浏览器事件处理顺序的差异搞的鬼！

先把你的代码贴出来方便大家参考：

<html> 
<script type="text/javascript"> 
function save(){ 
alert("in Save Method..") 
window.location = "https://google.co.in"; 
} 
function isValidFraction(inputObj) { 
if(!inputObj.value.match(/^\d+(\.\d+)?$/)){ 
inputObj.value=""; 
//inputObj.focus(); 
alert("Inavlid Float Number"); 
return false; 
} 
return true; 
} 
function isValidInteger(inputObj) { 
if(!inputObj.value.match(/^\d+(\.\d+)?$/)){ 
inputObj.value=""; 
//inputObj.focus(); 
alert("Inavlid Integer Number"); 
return false; 
} 
return true; 
} 
</script> 
<a href="javascript:save()"> Save </a> 
<br><br> 
<input type="text" id="float_input" placeholder="Float Value" onblur="if(isValidFraction(this)){alert('valid.......');}"> 
<input type="text" id="int_input" placeholder="Int Value" onblur="if(isValidInteger(this)){alert('valid.......');}"> 
</html>

问题根源 #

Mozilla ESR对事件队列的处理逻辑和其他浏览器不同：当你点击Save链接时，click事件的优先级被排到了输入框onblur事件前面，导致save()直接先执行，完全不等验证逻辑跑完。

解决方案（按推荐程度排序） #

方法一：主动控制验证与保存的顺序（最稳妥）

把Save链接的逻辑改成先手动触发所有输入框的验证，只有全部通过才执行保存：

1. 修改超链接的触发函数：

<a href="javascript:checkAndSave()"> Save </a>

2. 在脚本里新增验证前置函数：

function checkAndSave() {
  // 获取需要验证的输入框
  const floatInput = document.getElementById('float_input');
  const intInput = document.getElementById('int_input');
  
  // 手动执行验证逻辑
  const isFloatValid = isValidFraction(floatInput);
  const isIntValid = isValidInteger(intInput);
  
  // 只有全部验证通过才执行保存
  if (isFloatValid && isIntValid) {
    save();
  } else {
    // 给用户明确的反馈，比如把焦点定位到错误输入框
    if (!isFloatValid) floatInput.focus();
    if (!isIntValid) intInput.focus();
  }
}

这种方法完全不受浏览器事件队列差异的影响，从根源上确保验证优先执行。

方法二：给保存逻辑加微小延迟（临时应急方案）

通过setTimeout给save()加个短延迟，让onblur事件有足够时间跑完：

<a href="javascript:setTimeout(save, 100)"> Save </a>

不过这个方法不太可靠，因为延迟时间很难适配所有场景，验证逻辑复杂时可能还是会出问题，只适合临时救急。

方法三：根据验证状态禁用/启用链接（体验优化）

可以在输入框的onblur事件里动态控制Save链接的可点击状态，输入不合法时用户根本点不动：

1. 新增状态控制函数：

function toggleSaveLink() {
  const floatInput = document.getElementById('float_input');
  const intInput = document.getElementById('int_input');
  const saveLink = document.querySelector('a[href="javascript:save()"]');
  
  const isAllValid = isValidFraction(floatInput) && isValidInteger(intInput);
  
  // 通过CSS控制链接的可点击性和视觉状态
  saveLink.style.pointerEvents = isAllValid ? 'auto' : 'none';
  saveLink.style.opacity = isAllValid ? '1' : '0.5';
}

2. 修改输入框的onblur事件：

<input type="text" id="float_input" placeholder="Float Value" onblur="toggleSaveLink(); if(isValidFraction(this)){alert('valid.......');}">
<input type="text" id="int_input" placeholder="Int Value" onblur="toggleSaveLink(); if(isValidInteger(this)){alert('valid.......');}">

这种方式能给用户更直观的反馈，避免无效操作。

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