显示下拉菜单onmousedown而不失去onclick功能

Show drop down menu onmousedown without loosing onclick functionality

本文关键字：失去 onclick 功能 下拉菜单 onmousedown 显示      更新时间：2023-09-26

我试图得到一个下拉菜单的工作，因为大多数下拉菜单似乎工作，即只要按下鼠标按钮上的触发器下拉菜单显示。似乎相当容易与一些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之前开火?

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

<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/

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

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

这个方法怎么样?

<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为菜单打开器设置div

还有另一种方法:

<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>

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

相关文章：