HTML Select Element: оставляя опцию триггеров Select mouseout Событие в Safari - PullRequest
Новая
       40

HTML Select Element: оставляя опцию триггеров Select mouseout Событие в Safari

0 голосов
/ 20 сентября 2018

Я сузил проблему с некоторым кодом, который разрабатываю, до следующего:

Если я назначаю прослушиватель событий mouseout для элемента HTML select, он срабатывает всякий раз, когда яперемещать мышь от одного option элемента к другому;не только когда вы перемещаете мышь за пределы select.

, я проверял это на моем Mac.Это происходит в Safari, но не в Firefox или Chrome, что говорит о том, что это не предполагаемое поведение.

Я пытался использовать фазу захвата и не допустить продолжения события двумя способами, но Safari, похоже,искренне верю, что оставляя option, также оставляем select.Я также пытался использовать событие mouseleave, но у меня возникла та же проблема.

Как я могу предотвратить это?

Пример 

var list=document.querySelector('div#list>select');
list.addEventListener('mouseleave',exit,true);
function exit(event) {
	event.stopPropagation();
	if(event.target!==this) return;
	console.log(`${this} ${event.eventPhase} ${event.target}\n`);
}
<div id="list">
	<select name="list" size="9">
		<option>Eight</option>
		<option>Five</option>
		<option>Four</option>
		<option>Nine</option>
		<option>One</option>
		<option>Seven</option>
		<option>Six</option>
		<option>Three</option>
		<option>Two</option>
	</select>
</div>

1 Ответ

0 голосов
/ 24 сентября 2018

После экспериментов со всевозможными возможностями, я обнаружил, что вы можете проверить, находится ли мышь внутри элемента select, используя document.elementsFromPoint.

Добавление этой строки помогло: 

if (document.elementsFromPoint(event.clientX,event.clientY).includes(list)) return;


var list=document.querySelector('div#list>select');
list.addEventListener('mouseleave',exit,true);
function exit(event) {
//	Check the mouse is inside select element
if (document.elementsFromPoint(event.clientX,event.clientY).includes(list)) return;
event.stopPropagation();
if(event.target!==this) return;
console.log(`${this} ${event.eventPhase} ${event.target}\n`);
}
<div id="list">
	<select name="list" size="9">
		<option>Eight</option>
		<option>Five</option>
		<option>Four</option>
		<option>Nine</option>
		<option>One</option>
		<option>Seven</option>
		<option>Six</option>
		<option>Three</option>
		<option>Two</option>
	</select>
</div>
...