jQuery .focus() 在安卓上不起作用答案

【问题标题】：jQuery .focus() not working on androidjQuery .focus() 在安卓上不起作用
【发布时间】：2013-01-23 07:07:58
【问题描述】：

我正在 Android 上开发一个移动网站，其中有一个选择列表作为菜单。

选择列表位于视图区域之外，我想通过单击 div 来切换带有浏览器选项的弹出窗口。

我已经尝试了数百万种方法来打开视图以选择一个值，但都没有成功...经过一些研究后，我在stackoverflow 上读到 .focus() 函数在 android 上被禁用设备。

我知道这段代码适用于 IOS：

$(document).ready(function(){
    $("#navigation").click(function(){
        $("#mobileMenu").focus();
    });
});

带有以下html：

<select id="mobileMenu">
    <option value="link1" onclick='openMobileMenuLink' >link one</option>
    <option value="link2" onclick='openMobileMenuLink' >link two</option>
    <option value="link3" onclick='openMobileMenuLink' >link three</option>
</select>

有什么方法可以在不破坏代码的情况下在 android 设备上打开选项透视图（我正在 chrome 中进行测试）（在 IOS 上可以正常工作）。

【问题讨论】：

标签： android jquery html focus responsive-design

【解决方案1】：

我终于找到了解决办法：

当点击一个div时，js会产生一个点击事件。

<div onclick="generateSelectDropDown()">

上面的div调用如下函数：

window.generateSelectDropDown = function () { 
    var dropdown = document.getElementById('mobileMenu');
    showDropdown(dropdown);
};  

showDropdown = function (element) {
    var event;
    event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    element.dispatchEvent(event);
};

【讨论】：

这个解决方案对我有用，但需要注意的是它也已被弃用。我改用element.dispatchEvent(new MouseEvent('mousedown')); 来实现相同的结果，而不使用已弃用的initMouseEvent 方法。

【解决方案2】：

不确定这是否仍然适用于 iOS，但应该...

$(document).ready(function(){
    $("#navigation").click(function(){
        $("#mobileMenu").click();
    });
});

【讨论】：