jQueryイベントにmouseoutとmouseoverに子要素がある場合-jsチュートリアル-php.cn

jQueryイベントにmouseoutとmouseoverに子要素がある場合

黄舟

リリース： 2017-06-28 14:15:28

オリジナル

1572 人が閲覧しました

マウスアウトイベントとマウスオーバーイベントは誰もがよく知っていますが、子要素がある場合、そのイベントにマウスアウト子要素とマウスオーバー子要素も表示されることをまだ知らない人もいます。トリガーは 1 つです。例を見てみましょう:

<html><head>  
  
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />  
  
<title>mouseout子元素的触发</title>  
  
<script type="text/javascript" src="jquery.min.js"></script>  

<style>
  #list{width:100px;padding:10px;border:1px solid #ccc;background:#FFF;}

  #list ul{margin:0;padding:0;background:#333;}

  #list ul li{list-style:none;margin-bottom:5px;}

  #list ul li a:hover{background:#666;color:#FFF;}

  </style>

</head>  
  
<body>  
  
<a href="#" id="showList">鼠标请过来</a>  
  
<div id="list" style="display:none;">  
  
    <ul>  
  
        <li><a href="#">选项一</a></li>  
  
        <li><a href="#">选项二</a></li>  
  
        <li><a href="#">选项三</a></li>  
  
        <li><a href="#">选项四</a></li>  
  
        <li><a href="#">选项五</a></li>  
  
    </ul>  
  
</div>  
  
</body>  
  
<script type="text/javascript">  
  
    $("#showList").bind("mouseover",function(){  
  
        $("#list").toggle(&#39;fast&#39;);  
  
    }); 
  
      
  
    $("#list").bind("mouseout",function(){  
  
        $(this).slideUp(&#39;fast&#39;);  
  
    });
  
</script>  
  
</html>

ログイン後にコピー

この例の本来の目的は、リストボックスを開いてオプションを選択することです。マウスが離れるとリストボックスは閉じますが、実際には、マウスがその上に移動している限りリストボックスは閉じられます。その理由は、リストがマウスアウトイベントにバインドされているためです。リストには多くのサブ要素があるため、ul と li のマウスパスイベントがトリガーされることが合意されています。つまり、マウスが ul の外に移動したときに発生します。また、mouseout イベントもトリガーされます。

多くの解決策があります。この記事では、jquery に対応する 2 つのイベント、mouseenter と Mouseleave を使用します。

Mouseout イベント名を MouseLeave に変更するだけで完了です。へへ、簡単！ jQueryが考えられました。 ^_^,

Mouseleave: Mouseout イベントとは異なり、mouseleave イベントは、マウスポインターが選択された要素から離れた場合にのみトリガーされます。マウスポインターが子要素から離れると、mouseout イベントもトリガーされます。例

MouseEnter: Mouseover イベントとは異なり、mouseenter イベントは、マウスポインターが選択された要素を通過したときにのみトリガーされます。マウスポインターが子要素を通過すると、mouseover イベントもトリガーされます。

以上がjQueryイベントにmouseoutとmouseoverに子要素がある場合の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。