javascript - jQuery - 选择更改事件会导致选择框在 IE10 和 FF 中立即再次关闭

Question

我在将 jquery“更改时”事件绑定(bind)到 <select> 时遇到了一个非常奇怪且烦人的问题。 - IE10 和(各种)firefox 版本中的框。
Chrome 或 IE11 中不会出现此问题。

单击选择框后打开的下拉菜单会立即再次关闭，但前提是绑定(bind)了“更改时”事件。
我在这里使用相当标准的 jquery 例程:

$(document).on("change", "#kp_gebdat_y, #kp_gebdat_m, #kp_gebdat_d", function () {

    var year = $("#kp_gebdat_y").val();
    var month = $("#kp_gebdat_m").val();
    var day = $("#kp_gebdat_d").val();

    $("#kp_gebdat").val(year + "-" + month + "-" + day);
});

我已经尝试过乱搞 preventDefault()但这并没有改变任何事情。在 IE10 中单击任何一个保管箱后，第一个下拉列表似乎已“聚焦”。

这是一个 JSFiddle，它也可以在 IE10 和 FF 中重现该问题: http://jsfiddle.net/northkildonan/7zyw2nff/1/

如有任何帮助，我们将不胜感激!

Answer 1

正如上面评论中提到的，问题不在于 jQuery 或 JavaScript 事件处理程序，而在于标记本身。选择字段嵌套在标签标记内:

<label>
    <select type="text">
        <option value="0">Tag</option>
        [...]   
    </select>
    <select type="text">
        <option value="0">Monat</option>
        [...]   
    </select>
    <select type="text">
        <option value="0">Jahr</option>
        [...]   
    </select>   
</label>

这就是导致错误的原因:如果您聚焦第二个或第三个选择字段，该事件将委托(delegate)给标签，该标签(在 FF 中)绑定(bind)到第一个表单字段子项 - 您的第一个选择字段并聚焦它 - 并且该焦点会导致同一标签内的第二个+第三个选择字段立即模糊。因此，您可以完全删除标签或将每个选择嵌套在自己的标签中:

<label>
    <select type="text">
        <option value="0">Tag</option>
        [...]   
    </select>
</label>
<label>
   [...]
</label>

我认为最终 FF 行为是正确的，因为标签应该与一个元素相关。