Register a mouseover event on a

Question

so I'm starting to experiment with javascript/jquery and I have an input field with a datalist attached to it. The only problem I have is that when i "hover" over the datalist (once it appears) I want to trigger an event.

I have managed to trigger click and change events, but mouseover just won't work and I can't seem to find an example that works. Here is the code

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

Please tell me what I am missing, Thank you!

score 4 · Accepted Answer · edited May 23 '17 at 10:27

4

For mouse over use the below syntax

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

If you want to trigger the event on options of datalist, it's not possible because they are shadow elements. please see the explanation from another SO question. This explains better about it.

edited May 23 '17 at 10:27

Community

1
1

answered Aug 24 '16 at 21:28

Nalin Aggarwal

886
5
8

Thank you for that, mouseover was of course the event I wanted. I have edited the question. Unfortunately that does not solve my problem. Yes it triggers an event when I'm hovering over the actual input field. But I want it to trigger when I hover over one of the options. – Johan Aug 24 '16 at 21:33
@Johan Well!! ohkay I updated my answer for it!! it's not possible !! – Nalin Aggarwal Aug 24 '16 at 21:48
1

Ok thank you! I'll try to find another solution then. – Johan Aug 24 '16 at 21:50
Just out of curiosity, this is not possible with a select either? It seems like it isn't. – Johan Aug 28 '16 at 18:11
@Johan so any solution you found or nothing ? – Nalin Aggarwal Aug 28 '16 at 18:16
no unfortunately, tried moreless the same thing using a – Johan Aug 28 '16 at 18:45
@Johan yup!! as the link says,events can't be attached on shadow elements – Nalin Aggarwal Aug 29 '16 at 15:29

Register a mouseover event on a

1 Answers1