onmouseoutがselectタグの中ですべてのオプションを呼び出す理由

Question

selectオプションから複数のselectオプションを呼び出すonmouseout関数は、選択ボックスから出さずに変更できます。このイベントの問題の理由は分かりますか？

selectタグからmultiple属性を削除している間にバグが修正されました。マウスアウトで

function mout(e){ 
 
     console.log("mouse is out"); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <select id="x" multiple onmouseout="mout(this)"> 
 
     <option value="1">11:00 10-10-2017</option> 
 
     <option value="2">11:00 10-10-2017</option> 
 
     <option value="3">13:00 10-10-2017</option> 
 
    </select>

Answer 1

mouseleaveを使用してください。

マウスポインタが子要素 の要素と選択された要素を残すと、イベントがトリガーされます。

mouseleaveイベントは、マウスポインタが選択された要素 を離れるときにのみトリガされます。

function mout(e){ 
 
     console.log("mouse is out"); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <select id="x" multiple onmouseleave="mout(this)"> 
 
     <option value="1">11:00 10-10-2017</option> 
 
     <option value="2">11:00 10-10-2017</option> 
 
     <option value="3">13:00 10-10-2017</option> 
 
    </select>

Answer 2

onfocusoutと同様です。選択にmultipleが有効になっている場合、UIはonmouseout = onfocusout = onhoverとなります。

multipleと同じではありません。その間に、onmouseoutがclicking, changing and then focusing outの後にトリガーされる従来のドロップダウンがあります。

これが役に立ちます。

Answer 3

あなたはjQueryの上mouseleaveを使用することができます。

$("#x").on("mouseleave", function(e) { 
 
    console.log("mouse is out"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script> 
 
<select id="x" multiple> 
 
    <option value="1">11:00 10-10-2017</option> 
 
    <option value="2">11:00 10-10-2017</option> 
 
    <option value="3">13:00 10-10-2017</option> 
 
</select>