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处释放鼠标按钮时将其折叠。有没有办法阻止onclick在onmousedown之前开火时停止？

Answer 1

尝试添加onclick事件并使用其名称

提交表单

＆＃13;

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

＆＃13;

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>

它模拟正常的键行为。虽然我并不完全确定它能在所有操作系统上以正确的方式模拟所有操作系统。

显示下载菜单onmousedown而不会丢失onclick功能

4 个答案: