Проблема с пробелом в Microsoft Edge <select>
В Microsoft Edge существует разрыв между меню <select> и его опциями, когда вы раскрываете меню, например:
Это может привести к проблемам с событием mouseout, поскольку его поведение не соответствует Chrome. Рассмотрим этот минимальный пример:
const menu = document.getElementById('menu');
menu.addEventListener('mouseout', (e) => {
// The line below fixes the glitch in Firefox, but not Edge
if (e.relatedTarget === null) return;
document.body.classList.toggle('red');
});.red {
background: red;
}<select id = "menu">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>В Edge и только в Edge, когда вы перемещаете курсор мыши между меню и его расширенными параметрами, вызывается событие mouseout. Как предотвратить такое поведение в Edge?
Похоже (пока эта ошибка не исправлена) вам нужно найти свойства x и y события и сравнить их с координатами x/y выбранного элемента.
@Carcigenicate Похоже, у Microsoft нет системы отслеживания ошибок для Edge. Я отправил отчет, используя пункт меню «Отправить отзыв», но кто знает, будет ли он рассмотрен.
Не могу проверить это прямо сейчас, но что происходит, когда вы переносите выбор в дополнительный диапазон, а затем вместо этого прослушиваете событие mouseout в этом диапазоне?
@CBroe, это не сработало.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я попробовал предложение CBroe обернуть выбор в диапазон. Мой диапазон выглядит так:
<span id = "wrapper" style = "height:20px; display:inline-block">
Затем я слушаю событие mouseleave на обертке (в этом случае mouseout не будет работать). Это работает отлично. Похоже, что пространство между выбором и списком чуть меньше 20 пикселей и имеет фиксированную высоту. Вы можете попробовать.
Можете ли вы поделиться jsfiddle? У меня все еще не работает: jsfiddle.net/thdoan/kev4Lsha/1
@thdoan В jsfiddle вам нужно задать высоту 25 пикселей. Обычно, если вы используете независимый HTML-файл, вполне достаточно 20 пикселей. По крайней мере, для меня это работает.
Спасибо, я заставил его работать, используя большую высоту.
Могу воспроизвести. Возможно, об этом стоит сообщить.