边缘浏览器：更改选择值时触发mouseleave事件

Question

Example: http://jsfiddle.net/FGuVM/76/

<div>
<form>
    <select class='yearDropdown'>
        <c:forEach var="years" items="${parkYears}">
            <option value="2010">2010</option>
            <option value="2011">2011</option>
            <option value="2012">2012</option>
            <option value="2013">2013</option>
            <option value="2014">2014</option>
            <option value="2015">2015</option>
            <option value="2016">2016</option>
            <option value="2017">2017</option>
        </c:forEach>
    </select>
</form>

On Chrome, Firefox and IE 11 mouseleave is not triggered when selecting a value from a select.

On microsoft Edge mouseleave trigger before the change event.

The select doesnt work when because I change the select size before the value changes.

How can i make the select work as with other browser?

Answer 1

I can confirm the discrepancy between browsers. Further, it appears as though this may be a regression in the EdgeHTML engine, as Internet Explorer 11 on Windows 10 functions similar to Google Chrome and Mozilla Firefox in my testing :

<select size="3">
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

with ( document.querySelector( "select" ) ) {
    addEventListener( "change",     log.bind( this, "change" )     );
    addEventListener( "mouseenter", log.bind( this, "mouseenter" ) );
    addEventListener( "mouseleave", log.bind( this, "mouseleave" ) );
}

function log ( eventName ) {
    document.body.appendChild(
        document.createElement( "p" )
    ).textContent = eventName;
}

I'll see if the team already has an issue filed on this; if we do not, I will ensure that it's tracked.