Mousdedown auf mehreren Radiobuttons in Form

Question

Dies funktioniert, wenn ich auf einem weißen Raum in meiner Form klicken (mit .search-Form wie die Klasse meiner gesamten Form)

<form name="form" method="POST" action="/api/search.php" class="search-form" id="search-form"> 
    <input type="radio" name="role" data-role="wanted_specialty" value="1" class="radio-btn"><span class="overlay"></span> 1</label> 
    <input type="radio" name="role" data-role="wanted_specialty" value="2" class="radio-btn"><span class="overlay"></span> 2</label> 
    <input type="radio" name="role" data-role="wanted_specialty" value="3" class="radio-btn"><span class="overlay"></span> 3</label> 
</form> 




var form = document.querySelector('.search-form'); 
    form.addEventListener('mousedown',function(e){ 
    // DO SOMETHING 
    }); 

Aber es funktioniert nicht, wenn Ich benutze genau denselben Code, abgesehen von der '.search-Form', die dann von der Klasse aller meiner Optionsfelder geändert wird.

Wie kann ich es so machen, dass "DO ETWAS" funktioniert, wenn einer meiner Radioknöpfe angeklickt (oder nicht geklickt) wird. Es sollte ein Filtersystem mit Radio-Buttons mit Live-Update sein, wie viele Ergebnisse es in der Datenbank gibt.

Answer 1

MouseDown wird im Firefox-Browser nicht unterstützt.

https://developer.mozilla.org/fr/docs/Web/Events/mousedown

addEventListener kann nur auf ein Element verwendet werden, nicht auf einem Elementgruppe.

so etwas wie dieses Versuchen:

var form = document.getElementById('search-form'); 
[].forEach.call(form.childNodes, function(item, iterator){ 
    item.addEventListener('mousedown', function(e){ 
    //DO Something 
    alert('click'); 
    }); 
}); 

https://jsbin.com/kusuyacoyo/edit?js,output