マウスアウトイベントのケースと詳細な説明-H5 チュートリアル-php.cn

マウスアウトイベントのケースと詳細な説明

php中世界最好的语言

リリース： 2018-03-14 15:21:22

オリジナル

3698 人が閲覧しました

今回は、mouse outイベントの事例と詳細な説明をお届けします。ここでは、mouse outイベントを使用する際の注意事項について説明します。

マウスアウトイベントによって引き起こされる問題

1. 発生した問題
私は最近、模擬QQフレンドリストを表示するエフェクトを作成しました。これは、マウスがブラウザの右端に移動すると表示されます。友達リストボックスを閉じます。

コードは次のとおりです:

Insert title here
#friends{
        border:1px solid #ff0000;
        width:200px;
        height:400px;
        position:absolute;
        right:0px;
        top:20px;
        background: #abcdef;
        display:none
    }
    #line{
        width:1px;
        height:800px;
        float:right;
    }
   var inter;
    jQuery(function(){
        /*鼠标移动到右边界线，好友列表框显示*/         ("#line").mouseover(function(){             $("#friends").show(1000);         });        /*鼠标离开好友框，隐藏*/
("#friends").bind(&#39;mouseout&#39;,function(event){
              $(this).hide(1000);  
         });  
    });

ログイン後にコピー

フレンドリスト

   <p style="height:25px"><span>会飞的鱼</span><img    style="max-width:90%"  src="images/boy.png"/ alt="マウスアウトイベントのケースと詳細な説明" ></p>
   <p style="height:25px"><span>会飞的鱼</span><img    style="max-width:90%"  src="images/boy.png"/ alt="マウスアウトイベントのケースと詳細な説明" ></p>
   <p style="height:25px"><span>会飞的鱼</span><img    style="max-width:90%"  src="images/boy.png"/ alt="マウスアウトイベントのケースと詳細な説明" ></p>
   <p style="height:25px"><span>会飞的鱼</span><img    style="max-width:90%"  src="images/boy.png"/ alt="マウスアウトイベントのケースと詳細な説明" ></p>

ログイン後にコピー

<p id="line"></p>

ログイン後にコピー

実行インターフェイス:

マウスアウトイベントのケースと詳細な説明上記のmouseoutイベントには問題がありますが、マウスを右端に移動したときにフレンドボックスが表示されるのは問題ありません。 . フレンドのニックネームに移動するとフレンドボックスが消えてしまいますが、これはなぜでしょうか？
その理由は、フレンドボックスには多数のサブ要素 p があり、各 p がフレンドに対応するためです。このとき、子要素の上にマウスを移動すると、親要素の Mouseout イベントがトリガーされます。さらに悪いことに、サブ要素 p にspan および image サブ要素があり、これによりサブ要素 p のマウスアウトがトリガーされ、最も外側のフレンドリストの p にバブルアップされます。
2. 解決方法
方法 1:
アイデア: マウスが現在ポイントしている要素がその子要素であるかどうかを判断し、それが子要素である場合は、それを非表示にせずに直接返します。

マウスアウトコードを友達リストに登録する p:

/鼠标离开好友框，隐藏/ (“#friends”).bind(‘mouseout’,function(event){               var tar=event.target || event.srcElement;//鼠标离开的元素               var totar=event.relatedTarget || event.toElement;//鼠标指向的元素               //如果鼠标指向了自己的子元素，则不触发mouseout事件              if(
(this).find(totar).size()>0||this==totar){ 
                return; 
            } 
            //否则，如果不是指向子元素，就表示鼠标已经离开了p 
            else  { 
                console.log(tar.id+’–’+totar.id); 
                $(this).hide(1000);  
            } 
         });

ログイン後にコピー

手順:

マウスオーバーイベントとマウスアウトイベントが発生すると、より多くの要素が関係します。どちらのイベントにも、マウスポインタを 1 つの要素の境界内から別の要素の境界内に移動することが含まれます。マウスオーバーイベントの場合、イベントの主なターゲットはカーソルを取得した要素であり、関連する要素はカーソルを失った要素です。同様に、mouseout イベントの場合、イベントの主なターゲットはカーソルを失った要素であり、関連する要素はカーソルを獲得した要素です。
DOM は、イベントオブジェクトの AssociatedTarget 属性を通じて、関連する要素に関する情報を提供します。このプロパティには、マウスオーバーイベントとマウスアウトイベントの値のみが含まれます。他のイベントの場合、このプロパティの値は null です。 IE は realtedTarget 属性をサポートしませんが、同じ情報を保持するさまざまな属性を提供します。マウスオーバーイベントがトリガーされると、関連する要素は IE の fromElement 属性に保存され、マウスアウトイベントがトリガーされると、関連する要素は IE の toElement 属性に保存されます。
上記のコードは、さまざまなブラウザーと互換性があるように書かれています。最初の方法が面倒な場合は、次の方法を参考にしてください。

方法 2:

アイデア: p に Mouseleave イベントを登録します。このイベントと Mouseout の違いは、マウスがこの要素内の子要素に移動したときにのみトリガーされるということです。この要素を残すと、バブリングはサポートされません。

コード:

/鼠标离开好友框，隐藏/ (“#friends”).bind(‘mouseleave’,function(event){
(this).hide(1000);  
            } 
         );

ログイン後にコピー

コードは大幅に合理化されました。実行結果は同じです。

手順:

mouseover と Mouseenter
Mouseover イベントは、マウスポインターが選択した要素またはそのサブ要素を通過するかどうかに関係なくトリガーされます。

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

mouseout と Mouseleave

Mouseout イベントは、マウスポインターが選択した要素または子要素から離れたかどうかに関係なくトリガーされます。

mouseleave イベントは、マウスポインターが選択された要素から離れた場合にのみトリガーされます。

公式説明:

マウスアウトイベントのケースと詳細な説明 Mahah DN は、
IE ブラウザのみがこれらのイベントをサポートしていて、Firefox と Safari は実際にそれらをサポートしていないと説明しています。しかし、jQuery を使用して Mouseenter 関数と Mouseleave 関数を登録すると、jQuery が内部でカプセル化されているため、すべての一般的なブラウザ (すべてテスト済み) をサポートできます。書き方については上記のコードを参照してください。 3.概要
マウスオーバーライドを登録し、要素のイベントを残す場合、次の 2 つの状況が考えられます。
1. 選択した要素に子要素がない場合は、mouseover と Mouseout を直接使用することを検討できます。
2. 子要素 (子要素を含む) がある場合は、mouseenter と Mouseleave を使用してイベントのバブルを防ぐことができます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

CSS3を使用して3D立体特殊効果を実現する方法

JavaScriptでボールジャンプ効果を実現する方法

JSデザインパターンのプロトタイプモードの詳細な説明

以上がマウスアウトイベントのケースと詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。