Mousdedown на нескольких радио-кнопок в виде

Question

Это работает, когда я нажимаю на белом пространстве в моей форме (с .search-формы как класс всей моей формы)

<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 
    }); 

Но это не работает, когда Я использую тот же самый код, кроме «.search-form», который затем изменяется классом всех моих переключателей.

Как я могу сделать так, чтобы «DO SOMETHING» работало всякий раз, когда нажимается какая-либо из моих переключателей (или отключена). Это должна быть система фильтрации с переключателями с живым обновлением, сколько результатов есть в базе данных.

Answer 1

MouseDown не поддерживается в браузере Firefox.

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

addEventListener может быть использован только на элементе, а не на элемент группы.

Попробуйте что-то вроде этого:

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