Uzyskaj aktualną wartość z datalist onhover

Question

Próbuję uzyskać aktualną wartość zawieszonego elementu w bazie danych. Więc jeśli otworzę dane z wartościami i po prostu przesuniemy na nich myszą, chcę aby wartości pojawiły się w konsoli.

To moja próba:

<input list="browsers" id="browser"> 
<datalist id="browsers"> 
    <option value="Internet Explorer"> 
    <option value="Firefox"> 
    <option value="Chrome"> 
    <option value="Opera"> 
    <option value="Safari"> 
</datalist> 

$("#browsers").on("mouseover", function() { 
    console.log($(this).value()); 
}); 

A oto skrzypce: https://jsfiddle.net/sshcvr5q/

Answer 1

Nie jestem pewien, czy to będzie możliwe. Opcje danych, wciąż widoczne w drzewie DOM dokumentu głównego, zostają sklonowane i encapsulated jako część drzewa Shadow DOM i niedostępne z dokumentu nadrzędnego. To właśnie te enkapsulowane węzły DOM w cieniu, nad którymi aktualnie się znajdujesz (na pewno w Chrome) i oryginalny węzeł w głównym drzewie DOM nie jest wyzwalany zdarzeniem mouseover lub hover po najechaniu kursorem na węzły DOM Cienia.

Jeśli używasz Chrome DevTools wglądu do drzewa DOM w JSFiddle przykład, można zobaczyć cień korzeń w kapsułkach DOM drzewa:

Zobacz this explanation z innym pytaniem przepełnienie stosu dla dalszych informacji o tym, dlaczego nie możesz słuchać zdarzeń w DOMU Cieni z dokumentu nadrzędnego.

Answer 2

Chyba trzeba sprawdzić $("#browser") i nie $("#browsers")

Ale i tak otrzymasz wartość na onChange lepiej :)

Pozdrawiam