Question

所以我开始尝试javascript / jquery，我有一个输入字段，附加了一个datalist。我遇到的唯一问题是，当我“悬停”在数据列表上时（一旦出现）我想触发一个事件。

我已设法触发点击和更改事件，但鼠标悬停不起作用，我似乎无法找到一个有效的示例。这是代码

<!DOCTYPE html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">

<script type="text/javascript">

    $(function(){ 
        // This works
        $("#browserList").on("change", function(){
            console.log("changed val=" + $(this).val());
        });

        // This does not 
        $("datalist#browsers").mouseover(function(){
            console.log("hovered");
        });

    });

</script>

<input list="browsers" id="browserList" placeholder="Find a browser">
<datalist id="browsers">
    <option>Explorer</option>
    <option>Firefox</option>
</datalist>

请告诉我我缺少的东西，谢谢！

Answer 1

对于鼠标过度使用以下语法

$("#browserList").mouseover(function(){
  //do something
})

如果你想在datalist的选项上触发事件，那是不可能的，因为它们是阴影元素。请从另一个SO问题中查看the explanation。这更好地解释了它。

在<datalist>上注册mouseover事件

1 个答案: