jQuery绑定td的blur事件在Safari 14未触发，其他浏览器正常怎么解决？

问题原因 #

• blur事件本身不支持冒泡，事件委托依赖事件冒泡机制才能触发父级绑定的监听函数。Chrome、Edge、Firefox对jQuery的blur事件委托做了额外兼容适配，但Safari 14未兼容该场景。
• <td>默认属于非可交互元素，未设置tabindex属性的情况下，Safari不会将其识别为可聚焦元素，因此不会触发对应的blur事件。

解决方案 #

方案1：替换为支持冒泡的focusout事件 #

focusout是blur的冒泡版本，所有主流浏览器都原生支持其冒泡特性，完美适配事件委托场景，修改代码如下即可：

console.log('running');
// 将事件名从blur替换为focusout
$(document).on('focusout', 'td', function (e) { 
console.log('blurred td');
myClass = $(this).attr('class').replace(/\s.+$/, ''); 

if (myClass === "clock" || myClass === "sumCalc") { // 若失去焦点的是单选按钮所属td
                input = $(this).children('input').filter(":checked").attr('value');
                console.log(myClass);
                e.stopPropagation();
        }
    
});

方案2：给td元素添加可聚焦属性 #

给需要触发blur事件的td元素添加tabindex属性，将其标记为可聚焦元素，即可让Safari识别该元素的blur事件。属性值设为-1代表元素仅可通过代码触发聚焦，不会被tab键切换选中：

// 初始化时批量给目标td添加tabindex属性
$('td.clock, td.sumCalc').attr('tabindex', '-1');

// 原有绑定逻辑保持不变
$(document).on('blur', 'td', function (e) { 
console.log('blurred td');
myClass = $(this).attr('class').replace(/\s.+$/, ''); 

if (myClass === "clock" || myClass === "sumCalc") {
                input = $(this).children('input').filter(":checked").attr('value');
                console.log(myClass);
                e.stopPropagation();
        }
});

方案3：绑定事件到td内的可交互元素 #

如果td内部本身有input等原生可交互元素，可以直接将事件绑定到内部元素上，规避非交互元素的焦点兼容问题：

$(document).on('blur', 'td input', function (e) {
  const targetTd = $(this).closest('td');
  // 原有针对td的逻辑，替换为对targetTd的操作即可
  myClass = targetTd.attr('class').replace(/\s.+$/, ''); 
  if (myClass === "clock" || myClass === "sumCalc") {
    input = $(this).filter(":checked").attr('value');
    console.log(myClass);
    e.stopPropagation();
  }
});

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