在不丢失 onclick 功能的情况下显示下拉菜单 onmousedown

Question

我尝试让下拉菜单工作，因为大多数下拉菜单似乎都可以工作，即只要在触发器上按下鼠标按钮，就会显示下拉菜单。一些 css 和 javascript 看起来很容易，但结果有点棘手。

最明显的方法是这样的：

<script>
    function toggle(id) {
        var el = document.getElementById(id);
        el.style.display = (el.style.display === 'none') ? 'inline-block' : 'none';
    }
</script>
<input type="button" value="click me" onmousedown="toggle('menu');"><div id="menu" style="display: none">Menu</div>

不幸的是，事实并非如此，因为现在无法再使用 tab 键导航到触发器并按 enter 键显示菜单。看来这需要用 onclick 来显示菜单。但是将 toggle 函数添加到 onclick 也会在 onmousedown 处显示菜单，然后在 onclick 处释放鼠标按钮时将其折叠。在 onmousedown 之前开火时，有没有办法阻止 onclick 开火？

Answer 1

尝试添加 onclick 事件并使用其名称提交表单

<input type="submit" value="click me" onmousedown="toggle('menu');" onclick="document.getElementById('form_name').submit();" >

Answer 2

希望这能很好地满足您的要求

<script>
    var lastEvent = '';
    function toggle(id, event) {
        event = event || window.event;
        if (lastEvent === 'mousedown' && event.type === 'click' && event.detail > 0){
            lastEvent = event.type;
            return;
        }
    
        var el = document.getElementById(id);
        el.style.display = (el.style.display === 'none') ? 'inline-block' : 'none';
        lastEvent = event.type;
    }
</script>
<input type="submit" value="click me" onmousedown="toggle('menu', event);" onclick="toggle('menu', event);">
<div id="menu" style="display: none">Menu</div>

https://jsfiddle.net/safeer/rzg7sahb/18/

Answer 3

这个方法怎么样？

<script>

function toggle(id) {
    var el = document.getElementById(id);
    el.style.display = (el.style.display == 'none') ? 'inline-block' : 'none';
}

function activate(e){
    alert(e.id);
}
</script>
<div id="menuWrapper" onmousedown="toggle('menu');"onmouseup="toggle('menu');">
   <div id="mainlink" >Click Here</div>
   <div id="menu" onmouseup="activate(this);" style="display: none">Menu</div>
</div>

JS fiddle with div for menu opener

Answer 4

这是另一种似乎可行的方法：

<script>
    function toggle(id) {
        var el = document.getElementById(id);
        el.style.display = (el.style.display === 'none') ? 'inline-block' : 'none';
    }
</script>
<input type="submit" value="click me" onmousedown="toggle('menu');" onkeypress="if (event.keyCode === 13) toggle('menu');" onkeyup="if (event.keyCode === 32) toggle('menu');">
<div id="menu" style="display: none">Menu</div>

它模拟了正常的按键行为。虽然我不完全确定它是否在所有操作系统上以正确的方式模拟了所有这些。

在不丢失 onclick 功能的情况下显示下拉菜单 onmousedown

Show drop down menu onmousedown without loosing onclick functionality

javascript

focus

onclick

onmousedown

drop-down-menu