Question

如何在onmouseout上关闭组合框？

<select onmouseout="">
 <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="mercedes">Mercedes</option>
 <option value="audi">Audi</option>
</select>

Answer 1

你不能这样做（可靠）。出现的弹出窗口无法以编程方式进行操作，即打开或关闭，其行为由浏览器（或操作系统）定义。

为了进一步扩展，IE和Firefox都可以通过模糊选择元素来关闭弹出窗口：

selectEl.blur();

虽然，即使将鼠标移动到弹出窗口中的选项， mouseout 事件也会触发，因此需要一些hackery魔法。在Chrome中，它会模糊选择元素，但框仍将保持打开状态。

通常最好只保留UI组件的行为，以便用户通过与您的网站交互获得他们期望的体验。

Answer 2

你可以像这样做一个小技巧......

<select onmouseover="size = 5" onmouseout="size = 0">
 <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="mercedes">Mercedes</option>
 <option value="audi">Audi</option>
</select>

这会将鼠标上的菜单展开，然后在搬出时将其折叠。

编辑：如果您不小心，这可能会导致放置其他元素时出现问题。

Answer 3

迟了几年但是如果其他人正在考虑这个......我可以通过发送鼠标点击来切换Chrome中选择元素的打开/关闭状态。在此示例中，将鼠标移到切换按钮上将切换<select>的状态。这是一个切换，不是明确的开放或关闭，但对我有用。

<script type="text/javascript">

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

    function toggleSelect() {
        clickSelect(document.getElementById("select"));
    }  
</script>


<form>
    <select id="select">
        <option>one</option>
        <option>two</option>
    </select>
    <input type="button" onmouseover="toggleSelect();" value="toggle select state" />
</form>

如何在onmouseout上关闭组合框？

3 个答案: