Question

我有一个空的select元素，我想在单击该元素时执行一些代码，但我不希望出现下拉列表，这是我发现的：

当我禁用了select元素时，我无法捕捉到mousedown事件。
当我启用select元素时，我可以捕获mousedown事件，但会出现下拉列表。

为了争论，我想要的是能够点击选择元素，JavaScript来抛出警告框但我想阻止下拉列表显示。

谢谢！

Answer 1

捕获select元素的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

为什么不禁用select元素并将select元素包装在与select元素具有相同高度和宽度的div（或其他）中，并使用mousedown事件与此div？

Answer 3

<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>

单击select元素的（mousedown）事件

3 个答案: