0

クラスを持つdivからmouse-out/inイベントが検出されるツールバーが必要ですcontainer。およびイベントは期待どおりに機能していますmouseover。mouseoutこれらのイベントは、マウスが要素とその子孫に出入りするときにトリガーされます。ただし、予期しないことが発生します。マウスを移動すると、新しく作成されたdivが削除され、削除された後、mouseoverイベントがトリガーされるため、別の新しいdivが作成されます。これによりDazzlingになります。この種の問題に遭遇したことがある人は、私を助けてください。ありがとう。

あなたがこのHTMLを持っているとしましょう：

<div id='parent' class="parent container">
    <div id="child1" class="child container">
    </div>
    <div id="child2" class="child container">
    </div>
</div>

そして、このJavaScript：

$(function() {
    $('div.container').on('mouseover', function(e){
        e.stopPropagation();
        $(this).append("<div class='newdiv'></div>")
        console.log("into " +$(this).attr('id'));
    }).on('mouseout', function(e){
        $(".newdiv",this).remove();
        console.log("out from  " + $(this).attr('id'));
    })
});

CSSの場合：

.parent
{
    border:1px solid black;
    width:100%;
    height:400px;
}

.child
{
    float:left;
    width:40%;
    border:1px solid red;
    margin:1px;
    height:300px;
}

.newdiv{
    border:1px solid blue;
    margin:2px;
    width:100px;
    height:100px;
    position:absolute;
    right:0;

}
4

3 に答える 3

1

私は問題を見つけました、それはあなたのCSSにありました。相対位置を追加します。それ以外の場合は、相対的な位置を持つ最初の1つを想定します。

.child
{
    float:left;
    width:40%;
    border:1px solid red;
    margin:1px;
    height:300px;
    position: relative;
}

http://jsfiddle.net/Jn7e2/をご覧ください

わあ、あなたは追加機能の後ろにセミコロンを持っていません。それは他の問題を克服するでしょう。

于 2013-03-25T12:47:39.790 に答える
1

子から親に伝播するイベントに問題がある可能性があるため、divをフォーカスするためにshow（）とhide（）を使用する必要があるかもしれません。これはどうですか：

http://jsfiddle.net/Jn7e2/1/

<div id='parent' class="parent container">
    <div id="child1" class="child container">
        <div class="newdiv" style="display:none">
        </div>
    </div>
    <div id="child2" class="child container">
        <div class="newdiv" style="display:none">
        </div>
    </div>
</div>
  • JS：
    $（function（）{
      $（'div.container'）。on（'mouseover'、function（e）{

      e.stopPropagation（）;
          $（this）.children（ "。newdiv"）。show（）;
          console.log（ "into" + $（this）.attr（'id'））;
       }）。on（'mouseout'、function（e）{
           e.stopPropagation（）;
           $（ "。newdiv"、this）.hide（）;
           console.log（ "out from" + $（this）.attr（'id'））;
       }）
     }）;
于 2013-03-25T14:18:29.260 に答える
0

すべて、私はそれを作る方法を見つけますが、それは非常に冗長で、緊急に見えます...誰もがそれをより簡単で楽しいものにするためのより良い方法を与えることができますか..うまくいけば。ありがとう。

$(function() {
    $('div.container').mouseenter(function(e){
        e.stopPropagation();
        $(this).css("border","2px solid red");
        $(this).append("<div class='newdiv'></div>"); 
        $(this).parents().each(function(){
            if ($(this).children(".newdiv").length>0)
            {
                $(this).children(".newdiv").remove();
                $(this).css("border","1px solid red");
            }
        });
        if ($(".newdiv",this).length==0)
         {
            //alert('ddd');

         }

        console.log("into " +$(this).attr('id'));
    }).mouseleave( function(e){
        $(".newdiv",this).remove();
        if ($(this).parent().hasClass("container") && $(".newdiv",$(this).parent()).length==0)
        {
            $(this).parent().css("border","2px solid red");
            $(this).parent().append("<div class='newdiv'></div>"); 
        }

        $(this).css("border","1px solid red");
        console.log("out from  " + $(this).attr('id'));
    });
});
于 2013-03-25T15:33:08.040 に答える