Question

我正在尝试将我的应用程序的上部面板默认为top属性为-80px，因此除了它的一小部分外，它是不可见的。当用户将鼠标悬停在该部分上时，它会再次向下滑动。

问题是，这个div有一个textbox，我希望div在用户输入textbox时停止向上滑动，即使他将鼠标指针移开，但不幸的是知道怎么做，这是我的代码：

的index.html

<div id="taskInput">
    <div id="controllers">
         <input type="text" name="mainTask" id="mainTask">
         <button id="addMain">Add</button>
         <button id="resetMain">Reset</button>
    </div>       
</div>

此部分的CSS：

#taskInput {
    background: red;
    width:606px;
    height:43px;    
    padding: 22px;    
    box-shadow: 0px 3px 4px -3px black;
    position: absolute;    
    z-index : 0;
    top:0px;
}

的script.js

$(function(){
    $("#taskInput").delay(400).animate({top:-80}, 500,function(){});
    $("#taskInput").mouseover(
        function(){
            $(this).stop().animate({top:0}, 200, function(){});            
        });

    $("#taskInput").mouseout(function(evt){                    
        $(this).stop().animate({top:-80}, 200, function(){});           
    })

    $("#mainTask").focus(function(){
        //i though i can put something here to stop mouseout event or something
    })
})

Answer 1

我已经从评论中改变了主意，没有必要取消绑定事件或使用全局变量来跟踪它。您可以使用document.activeElement获取页面上当前关注的元素，并将其ID与<input>的ID进行比较，如下所示：

$("#taskInput").mouseout(function(evt){
    if(document.activeElement.id !== 'mainTask') {   
        $(this).stop().animate({top:-80}, 200, function(){});
    }            
});

Working DEMO

Answer 2

将动画添加到顶部并在焦点功能中更改它

我没有测试过这个，但它应该可行

$(function(){
  writing = false;
  $("#taskInput").delay(400).animate({top:-80}, 500,function(){});
  $("#taskInput").mouseover(
    function(){
        $(this).stop().animate({top:0}, 200, function(){});            
    });

  $("#taskInput").mouseout(function(evt){   
    if(writing == false){                 
       $(this).stop().animate({top:-80}, 200, function(){});           
    }
  })

  $("#mainTask").focus(function(){
    //i though i can put something here to stop mouseout event or something
    writing = true
  })

  $("#mainTask").focusout(function(){
    //i though i can put something here to stop mouseout event or something
    writing = false
  })

})

Answer 3

jsFiddle DEMO

最简单的方法是将#mainTask的data-focus属性设置为true，然后在#taskInput上执行mouseout时，确保在为幻灯片设置动画之前将其设置为False。

$(function(){
    // ... code

    $("#taskInput").mouseout(function(evt){      
        console.log($('#mainTask').data('focus'));            
        if ($('#mainTask').data('focus') === false) {        
            $(this).stop().animate({top:-80}, 200, function(){});
        }            
    })

    $("#mainTask").on({
        focus: function(){
            $(this).data('focus', true);
        },  
        blur: function () {
            $(this).data('focus', false);
        }
    });
})

Answer 4

我想，你也可以尝试一下：

$('#taskInput').delay(400).animate({top:-80},500);

$('#taskInput').mouseover(function()
{
    $(this).stop().animate({top:0},200);            
});

$('#taskInput').mouseout(function()
{
    if(!$('#mainTask').is(':focus'))
    {
        $(this).stop().animate({top:-80},200);           
    }
});

<强> DEMO

编辑：

您也可以将其添加到您的代码中：

$('#mainTask').blur(function()
{
    $('#taskInput').stop().animate({top:-80},200);
});

<强> DEMO 2

Answer 5

在$（“＃mainTask”）。焦点事件处理程序中，您可以将全局布尔变量设置为true，在blur事件处理程序中将其设置为false，并在#taskInput mouseout事件处理程序中检查该变量的值

var preventSlide = false;

$("#taskInput").mouseout(function(evt){                    
    if (!preventSlide) {
        $(this).stop().animate({top:-80}, 200, function(){});           
    }
})

$("#mainTask").focus(function(){
    preventSlide = true;
})

$("#mainTask").blur(function(){
    preventSlide = false;
})

Answer 6

$(function(){
    var flag=true;

    $("#taskInput").on('mouseenter mouseleave', function(e) {
        if (flag) $(this).stop().animate({top: e.type=='mouseenter'?0:-80}, 200);
    }).delay(400).animate({top:-80}, 500);

    $("#mainTask").on('blur focus', function(e) {
        flag=e.type=='blur';
    });
});

FIDDLE

当文本框被关注时，阻止div向上滑动

6 个答案:

编辑：