Событие Click (mousedown) выбранного элемента

Question

У меня есть пустой элемент select, я хочу выполнить некоторый код при нажатии на этот элемент, но я не хочу, чтобы выпадающий список появлялся, вот что я нашел:

1. Когда я отключил элемент select, я не могу перехватить событие mousedown.
2. Когда я включаю элемент select, я могу зафиксировать событие mousedown, но появляется раскрывающийся список.

Ради аргументации я хочу иметь возможность щелкнуть элемент select, JavaScript, чтобы вызвать окно предупреждения, но я хочу, чтобы раскрывающийся список не отображался.

Спасибо!

Answer 1

захватить onmousedown событие выбранного элемента и отменить событие, установив event.returnValue в значение false.

<script type="text/javascript">
    function onSelectMouseDown() {
        event.returnValue = false;
        alert("mouse down caught and cancelled");
    }
</script>

<select id="select" onmousedown="onSelectMouseDown();"></select>

Answer 2

<script>
function makeDisable(){
    var x=document.getElementById("mySelect")
    x.disabled=true
}
function makeEnable(){
    var x=document.getElementById("mySelect")
    x.disabled=false
}
function f() {
makeDisable();
alert("something");
t=setTimeout("makeEnable();",1);
}
</script>

<select id="mySelect" onMouseDown="f();">
  <option value="opt1">Option 1</option>
  <option value="opt2">Option 2</option>
</select>

Answer 3

Почему бы не отключить элемент select и не обернуть элемент select в div (или что-то еще) такой же высоты и ширины, как элемент select, и использовать событие mousedown с этим div?