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

时间:2020-12-22 13:00:21

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

示例: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.

在Chrome上,从select中选择值时,不会触发Firefox和IE 11 mouseleave。

On microsoft Edge mouseleave trigger before the change event.

在更改事件之前的microsoft Edge mouseleave触发器上。

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?

如何使选择工作与其他浏览器一样?

1 个解决方案

#1


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:

我可以确认浏览器之间的差异。此外,似乎这可能是EdgeHTML引擎中的回归,因为在我的测试中,Windows 10上的Internet Explorer 11的功能类似于Google Chrome和Mozilla Firefox:

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

我会看看团队是否已经提出了这个问题;如果我们不这样做,我会确保它被跟踪。

#1


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:

我可以确认浏览器之间的差异。此外,似乎这可能是EdgeHTML引擎中的回归,因为在我的测试中,Windows 10上的Internet Explorer 11的功能类似于Google Chrome和Mozilla Firefox:

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

我会看看团队是否已经提出了这个问题;如果我们不这样做,我会确保它被跟踪。