Question

当用户点击选择框时，我想通过在选择框上触发模糊事件来隐藏我所做的选项菜单。以下代码适用于Firefox，但不适用于Chrome。

 <select id="myselect" name="city">
                <option value="default" id="first">Default value</option>
            </select>



        <script type="text/javascript">

            $('#myselect').click(function(){
                $(this).blur();

            });

        </script>

在Chrome选项菜单中保持原样。

Answer 1

我怀疑这与用户模态状态有关（虽然我找不到任何支持它的文档，但我可能会补充）。我怀疑在用户从选项中做出选择之前，任何事件侦听器都会被忽略。

为了支持这一点，当我们将$(this).blur()事件与onchange <select>事件挂钩时，您可以看到<select>完全按预期触发： http://jsfiddle.net/TkfPN/

简单地禁用{{1}}元素会好得多。模糊聚焦元素是非常糟糕的HCI并且令用户感到沮丧。

Answer 2

这是我的问题解决方法

var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
        if(is_chrome) $(".option").hide();

其中class“option”表示选择框的所有选项。

Answer 3

我找到了解决方法。只需删除选择框的节点，然后重新添加即可！确保您使用的是委托事件处理程序。似乎适用于所有浏览器。这是我在jQuery中的解决方案，但如果有人想编写纯JS解决方案，那也会很好。

jQuery('.sortSelect').appendTo('.sortParent');

如果它不是appearant，则如果sortSelect是sortParent的最后一个直接子节点，则此示例中的标记有效。 $ .insertAfter（）/ $。insertBefore（）也可以。

模糊关闭选择框不能在chrome中工作？

3 个答案: