Показать выпадающее меню onmousedown без потери функциональности onclick

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> 

К сожалению, это не совсем то, так как теперь это не более возможно, чтобы перейти к триггеру с вкладкой ключом и нажмите ввод, чтобы отобразить меню. Кажется, для этого нужно меню для отображения с onclick. Но добавив функцию toggle в onclick, также отобразите меню на onmousedown, а затем сбрасывает его, когда кнопка мыши отпущена на onclick. Есть ли способ остановить onclick от стрельбы, когда onmousedown стрелял раньше?

Answer 1

Надежда это будет работать нормально для вашего требования

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

попробуйте добавить OnClick событие и отправить форму, используя его имя

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

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> 

Он эмулирует обычный ключ поведения. Хотя я не совсем уверен, что он эмулирует все это и правильно на всех операционных системах.