Blur事件导致.save-btn点击失效问题求助（禁用延时方案）

这个问题本质是浏览器事件触发顺序在搞鬼：当你点击.save-btn时，浏览器会先触发.item-name的blur事件（因为输入框失去了焦点），而你的blur逻辑直接隐藏了按钮，导致后续的click事件根本没机会触发——按钮都被藏起来了，自然接收不到点击信号。

下面给你两种不需要延时的解决方案，都能完美保留原有功能：

方案一：用mousedown替代click事件 #

mousedown的触发时机早于blur，这样在按钮被隐藏前就能执行我们的点击逻辑，之后再手动触发输入框的blur来完成状态重置：

修改后的JavaScript代码：

$(function(){
 $('.save-btn').hide();
 $('.item-wrapper').on('dblclick',function(){
  $('.item-name').removeAttr('contenteditable');
  $(this).find('.item-name').attr('contenteditable',true);
  $('.save-btn').hide();
  $(this).find('.save-btn').show();
 });
 $('.item-name').on('blur',function(){
  $('.save-btn').hide();
 });
 // 把click换成mousedown
 $('.save-btn').on('mousedown',function(){
  console.log('saved button clicked');
  alert('saved button clicked !!');
  // 手动触发输入框blur，确保编辑状态关闭
  $(this).closest('.item-wrapper').find('.item-name').blur();
 });
});

方案二：在blur事件中判断焦点去向 #

通过blur事件的relatedTarget属性，判断失去焦点后焦点是否落在当前项的.save-btn上，如果是就暂时不隐藏按钮，等click事件执行完再手动隐藏：

修改后的JavaScript代码：

$(function(){
 $('.save-btn').hide();
 $('.item-wrapper').on('dblclick',function(){
  $('.item-name').removeAttr('contenteditable');
  $(this).find('.item-name').attr('contenteditable',true);
  $('.save-btn').hide();
  $(this).find('.save-btn').show();
 });
 $('.item-name').on('blur',function(e){
  // 只有当焦点没落在当前item的save-btn上时，才隐藏按钮
  if (!$(e.relatedTarget).hasClass('save-btn')) {
    $('.save-btn').hide();
  }
 });
 $('.save-btn').on('click',function(){
  console.log('saved button clicked');
  alert('saved button clicked !!');
  // 点击完成后手动隐藏所有按钮
  $('.save-btn').hide();
 });
});

推荐用方案二，因为它更贴合你原本的交互逻辑，依然使用click事件，只是在blur时做了一个简单的判断，避免误隐藏按钮。

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