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

我发现了这个问题，它出现在你的CSS中。添加相对位置。否则它假设第一个具有相对位置。

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

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

Ow，你没有在追加函数后面加分号。这将克服任何其他问题。

Answer 2

也许您需要使用show（）和hide（）来聚焦div，因为从子传播到父级的事件可能存在问题。那怎么样：

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

Answer 3

所有，我确实找到了一种方法来制作它，但它非常冗长，看起来很难看......任何人都可以提供更好的方法来让它更容易和有趣..希望如此。感谢。

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

当鼠标进入时动态创建的元素。（意外触发鼠标输出事件）

3 个答案: