1

親divといくつかの子div（いくつかのボタンを含むボックス）があります。

ボタンがクリックされたときにメッセージをフェードインしたいのですが（childDivContainerのどこか）、マウスが大きな親領域（largerContainer）を離れるまでメッセージを表示したままにして、メッセージが常にポップアップしたり消えたりするのを防ぎます。 divを含むより大きなものにfadeOut（）を接続しました。

ただし、ユーザーが各子divからmouseOutsを実行するたびに、fadeOut（）がトリガーされます。これは、マウスオーバーなどに関連付けていないため、奇妙なことです。

$('#childDivContainer').click(
    function () {
        $("#demoMessage").fadeIn();

    });

$('#largerContainer').mouseout(
    function () {
        $("#demoMessage").fadeOut();
    });


<div id="largerContainer">
   <div id="childDivContainer">
    <div id="childDiv1"></div>
    <div id="childDiv2"></div>
    <div id="childDiv3"></div>
   </div>
</div>

よろしくお願いします。サイモン

4

3 に答える 3

3

mouseoutに変更する必要がありますmouseleave

マウスアウト()

  • マウスが「outerBox」に入ると、イベントは発生しません。
  • マウスが「outerBox」から出て「innerBox」に入ると、「outerBox」イベントが発生します。
  • マウスが「innerBox」から出て「outerBox」に入ると、「innerBox」イベントが発生し、「outerBox」イベントが続きます。
  • マウスが「outerBox」に移動すると、「outerBox」イベントが発生します。

マウスリーブ()

  • マウスが「outerBox」に入ると、イベントは発生しません。
  • マウスが「outerBox」を離れて「innerBox」に入ると、イベントは発生しません。
  • マウスが「innerBox」から出て「outerBox」に入ると、「innerBox」イベントが発生します。
  • マウスが「outerBox」に移動すると、「outerBox」イベントが発生します。

読む: http://www.mkyong.com/jquery/different-between-mouseout-and-mouseleave-in-jquery/

于 2013-03-19T15:26:15.107 に答える
0

カーソルを子 div の上に移動すると、マウスが を離れてlargerContainerに入ると見なされる場合がありますchildDiv。

の親イベントfadeOut()でをトリガーしようとする場合があります。largerContainermouseenter()

于 2013-03-19T15:28:09.517 に答える
0

mouseoutから#child(そして に入る) と、次#parentのようにイベントがバブルします。

2.   #parent -> fire mouseout
       ^
       |
    (mouseout event)
       |
1.    #child -> fire mouseout

だから

jQuery('#parent, #child').on('mouseout',function(e){
  console.log("mouseout: #" + this.id);
});

子からマウスアウトすると、

> mouseout: #parent
> mouseout: #child

回答:イベントの伝播 (バブリング) を停止し、場合によってmouseoverは子のイベントを追跡する必要があります (マウスを!#childで実際にトリガーmouseoutするためparent)。

mouseout イベントがどのように発生するかを示す簡単な例http://jsfiddle.net/sequoia/Z9n96/

この種の問題に取り組んでいるときに私が作成したより複雑な例 (停止伝搬動作をさまざまなイベントにアタッチ/デタッチして、動作がどのように変化するかを確認してください): http://jsfiddle.net/sequoia/GXmfA/4/

于 2013-03-19T15:46:57.377 に答える