鼠标移入时动态创建的元素.(意外触发鼠标移出事件) [英] dynamically created element when mouse in. (trigger the mouse out event unexpectedly)

问题描述

我想拥有一个工具栏，可以从具有container类的div中检测到鼠标移入/移入事件. mouseover和mouseout事件正在按预期方式工作.当鼠标移入和移出元素及其后代时，将触发这些事件.但是没有什么意外的事情发生:当鼠标自身移动时，新创建的div被删除，并且在删除后它将触发mouseover事件，因此创建了另一个新的div，这使其令人眼花.乱.任何遇到过此类问题的人都请帮助我.谢谢.

I want to have toolbar, where mouse-out/in events are detected from divs that have the class container. The mouseover and mouseoutevents are working as expected. These events are triggered when the mouse moves in and out of elements AND it's descendants. But there is something not to be expected happened: The newly created div is removed when the mouse was moved on itself.and after removed it will trigger the mouseover event, So another new div is created.This makes it Dazzling. Anyone who ever encountered this kind of problem please help me. thanks.

假设您拥有以下HTML:

Say you have this HTML:

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

然后，这个JavaScript:

And, this 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;

}

推荐答案

所有，我的确找到了一种制作方法，但是它很冗长，看上去很紧急...任何人都可以提供一种更好的方法来简化它和乐趣..希望.谢谢.

All, I do find a way to make it , but it is very verbose and looks urgly...Could anyone can give a better way to make it easier and fun.. hopefully. thanks.

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

这篇关于鼠标移入时动态创建的元素.(意外触发鼠标移出事件)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！