Question

我已经覆盖了select标签上的click事件。当我单击我的选择标记作为默认选项列表时，会显示选项列表。但是，当我点击选择标记时，我必须自定义该列表并执行其他工作。

我怎样才能做到这一点？

请参阅以下代码：

<!DOCTYPE html>
<html>
    <body>
        <select id="selectId">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="opel">Opel</option>
            <option value="audi">Audi</option>
        </select>
        <script>
            document.getElementById("selectId").onclick = function () {
                alert("second event");
            }
        </script>
    </body>
</html>

此处两个事件都被触发，但我只想要第二个事件。

Answer 1

您无法覆盖select元素onClick，因为它没有select元素。当您单击size时，浏览器会使用您无法调节的魔法来处理它。你也无法模拟它的点击。

您可以对选择做的唯一事情是：

更改其1属性。您可以将其更改为hidden以强制关闭，但您会看到一个丑陋的闪烁。
将所有子option元素的true属性设置为<div class="wrapper"> <select id="selectId" size="2" multiple="true"> <option value="volvo" hidden="true">Volvo</option> <option value="saab" hidden="true">Saab</option> <option value="opel" hidden="true">Opel</option> <option value="audi" hidden="true">Audi</option> </select> <div class="mask">Volvo</div> </div>

你可以伪造它，像这样：

http://jsfiddle.net/BupuU/3/

HTML：

$('.wrapper').click( function(event){
    console.log("sdsd");
    if(true){
       $('#selectId').show();
        $(".mask").hide();
    }
    event.stopPropagation();

});

$('body').click(function(){
    $('#selectId').hide();
    $(".mask").show();
});

使用Javascript：

.mask{
    position:absolute;
    top:0;
    width:100%;
    height:100%;
    text-align:center;
}

.wrapper{
    position:relative;
    display:inline-block;
    min-height:23px;
    min-width:62px;
    vertical-align:top; overflow:hidden; border:solid grey 1px;
}

#selectId{
    display:none;
    padding:20px;
    margin:-18px -30px -18px -8px;
}

CSS：

{{1}}

这只是一个起点。你可以从这里建造。

如何覆盖HTML select标签的onclick事件？

1 个答案: