HTML Select Element：离开选项触发 Safari 中的 Select mouseout 事件

Question

我已将我正在开发的一些代码的问题缩小到以下范围：

如果我将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>

Answer 1

在尝试了各种可能性之后，我发现你可以使用document.elementsFromPoint来检查鼠标是否在select元素内。

添加这一行有帮助：

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>