當鼠標進入時動態創建元素。（意外觸發鼠標移出事件）

Question

我想要一個工具欄，其中鼠標移出/進入事件是從具有類container的div檢測到的。 mouseover和mouseout事件按預期工作。當鼠標移入和移出元素並且它是後代時觸發這些事件。但是有一件不可預料的事情發生了：當鼠標移動到自己身上時，新創建的div將被移除，並且在移除後會觸發事件mouseover，因此會創建另一個新的div。這使得它變得耀眼。任何遇到過這種問題的人都請幫助我。謝謝。

說你有這樣的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; 

} 

Answer 1

所有，我找到一個方法來做到，但它是非常詳細的，看起來urgly ..任何人都可以提供更好的方式讓它變得更加簡單和有趣..希望。謝謝。

$(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')); 
    }); 
}); 

Answer 2

我發現這個問題，它是在你的CSS。添加相對位置。否則它將假設第一個與位置相關的第一個。

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

看一看http://jsfiddle.net/Jn7e2/

嗷，你沒有追加功能後面的分號。 這將克服任何其他問題。

Answer 3

也許你需要使用show（）和hide（）來集中div，因爲從child到parent傳播的事件可能會有問題。這個怎麼樣：

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')); 
     }) 
    });