jQuery .on('dblclick')事件在Firefox中无法触发的问题

嘿，我来帮你搞定这个跨浏览器的小问题！你的代码里有两个关键问题导致Firefox里事件不生效，咱们一步步捋清楚：

1. 类选择器写错了！ #

你代码里的 $("NomeCategoria") 少了类选择器的前缀 . —— jQuery会把它当成要找<NomeCategoria>标签，而不是类名为NomeCategoria的元素。修正后应该是 $(".NomeCategoria")，这是最基础的语法错误，先改它！

2. Firefox对disabled元素的事件限制 #

这是浏览器行为差异的核心问题：在Firefox中，设置了disabled="disabled"的表单元素，根本不会触发任何鼠标事件（包括click、dblclick），但Chrome在这方面的处理更宽松，允许触发事件。这就是为啥你在Chrome里能用，Firefox里没反应的原因。

给你两个可行的修正方案： #

方案1：用readonly替代disabled（适合输入框场景）

readonly属性的输入框无法编辑，但能正常响应鼠标事件，完美适配你的需求：

$(document).on('dblclick','.NomeCategoria',function(event){ 
  // 把所有同类元素设为readonly
  $(".NomeCategoria").each(function(){ 
    $(this).attr('readonly','readonly'); 
  }); 
  // 当前元素移除readonly，允许编辑
  $(this).removeAttr('readonly'); 
}); 

方案2：自定义状态+样式模拟禁用（如果必须保留disabled视觉效果）

如果需要元素看起来是“禁用”状态（灰掉、光标变禁用样式），但又要触发事件，可以用自定义属性+CSS模拟：

.NomeCategoria.disabled-mock {
  background-color: #eee;
  color: #999;
  cursor: not-allowed;
}

$(document).on('dblclick','.NomeCategoria',function(event){ 
  // 给所有同类元素加禁用样式和自定义标记
  $(".NomeCategoria").addClass('disabled-mock').attr('data-disabled','true'); 
  // 当前元素移除禁用样式和标记
  $(this).removeClass('disabled-mock').removeAttr('data-disabled'); 
}); 

后续提交表单时，你可以通过data-disabled属性判断是否要处理该元素。

完整修正后的示例代码（用readonly方案） #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type="text" id="19" readonly="readonly" class="NomeCategoria" value="示例分类名称">
<script>
$(document).on('dblclick','.NomeCategoria',function(event){ 
  $(".NomeCategoria").each(function(){ 
    $(this).attr('readonly','readonly'); 
  }); 
  $(this).removeAttr('readonly'); 
}); 
</script>

这样修改后，双击事件在Chrome和Firefox里都能正常触发啦！

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