select element onmouseleave event in safari

问题

I want to catch the mouse leaving a select box with the code below.

In Chrome this works great, but in Safari the event fires also when moving from the box to the options inside.

How can I get the onmouseleave event to fire only when leaving the select element ?

thx!

var s=document.getElementById("myselect");
s.onmouseleave=function(e) { alert("mouseleave"); }

<select id="myselect" size=4>
  <option>first</option>
  <option>second</option>
  <option>third</option>
  <option>forth</option>
 </select>

回答1:

seems like onmouseleave is not well supported in safari so I ended up using onmouseout instead:

var s=document.getElementById("myselect");
s.onmouseout = (e => {
  let related=(e.relatedTarget ? e.relatedTarget.tagName : null);
  if (related!=='SELECT' && related!=='OPTION') alert("left select box");
});

<select id="myselect" size=4>
  <option>first</option>
  <option>second</option>
  <option>third</option>
  <option>forth</option>
 </select>

来源：https://stackoverflow.com/questions/39189017/select-element-onmouseleave-event-in-safari