JavaScript - HTML <select> onclick Event triggered when clicking the down button of the scrollbar

Question

I'm trying to use the onclick() Event of the Select object. The application correctly enters the function and executes the code there. However, it is already executed when clicking on the down button of the scroll bar, giving the user no chance to view the other options without accidently triggering an event.

var selectChange = function(){
    // do some stuff
}

document.getElementById("select").onclick = selectChange;  

<select id="select">
    <option value="1" selected>one</option>
    <option value="2">two</option>
    <option value="3">three</option>
    <option value="4">four</option>
</select>

How can I resolve this issue?

Answer 1

document.getElementById("select").onchange = selectChange; 

DEMO

Answer 2

I think you should call selectChange on blur event instead of click, since click is fired way before select dropdown is being rendered.

document.getElementById("select").onblur = selectChange;