javascript - 为什么 onmouseout 在选择标签内调用每个选项更改

Question

多选选项调用onmouseout函数，每一个选项变化都没有从选择框出来，请问这个事件问题的原因是什么？

修复了从 select 标签中删除 multiple 属性时的错误。

function mout(e){
        console.log("mouse is out");
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <select id="x" multiple onmouseout="mout(this)">
        <option value="1">11:00 10-10-2017</option>
        <option value="2">11:00 10-10-2017</option>
        <option value="3">13:00 10-10-2017</option>
    </select>

Answer 1

使用 mouseleave。

The mouseout event triggers when the mouse pointer leaves any child elements as well the selected element.

The mouseleave event is only triggered when the mouse pointer leaves the selected element.

function mout(e){
        console.log("mouse is out");
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <select id="x" multiple onmouseleave="mout(this)">
        <option value="1">11:00 10-10-2017</option>
        <option value="2">11:00 10-10-2017</option>
        <option value="3">13:00 10-10-2017</option>
    </select>