Why createEvent does not work in firefox

I have a div that inside of this div contains select option as hidden and I have a script in jquery that when clicking the button shows the list with option is working well in all browsers only in firefox and which does not work when clicking does not happen.

Script

$('#botao_categoria').on("click", function () {
  var e = document.createEvent("MouseEvents")
  e.initMouseEvent('mousedown');
  $('#categoria')[0].dispatchEvent(e);
});

HTML

 <div id="categoria_label" class="input_home_pequisa"><span>Escolha uma  categoria</span>
<img id="botao_categoria" style="float:right; margin-top:4px;  cursor:pointer;" src="img/select_home.png">
 </div>
 <div style="visibility: hidden; margin-left:15px;">
<select name="categoria" id="categoria">
  <option value="Escolha uma categoria">Escolha uma categoria</option>
  <option value="restauracao">Restauração</option>
  <option value="hotelaria">Hotélaria</option>
  <option value="comercios">Comércios</option>
  <option value="servicos">Serviços</option>
  <option value="lazer">Lazer</option>
  <option value="bares">Bares</option>
</select>