在<datalist>

上註冊一個鼠標懸停事件，所以我開始嘗試使用javascript/jquery，並且我有一個輸入字段，並附加了一個datalist。我遇到的唯一問題是，當我「懸停」在數據列表上（一旦出現），我想觸發一個事件。在<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>

請告訴我，我很想念，謝謝！

來源

2016-08-24 Johan

對於鼠標使用下面的語法

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

如果你想觸發數據列表的選項的情況下，這是不可能的，因爲他們是陰影元素。請參閱另一個SO問題the explanation。這解釋得更好。

來源

2016-08-24 21:28:43

謝謝你，mouseover當然是我想要的事件。我編輯了這個問題。不幸的是，這並沒有解決我的問題。是的，當我懸停在實際輸入字段上時，它會觸發事件。但是當我將鼠標懸停在其中一個選項上時，我希望它觸發。 – Johan

@Johan Well !! ohkay我更新了我的答案！這是不可能的！！ –

好的，謝謝！我會盡力找到另一個解決方案。 – Johan

回答

相關問題