3

所以我有这个在焦点（）上扩展的文本区域，并在模糊（）上返回到它的原始位置。
我遇到的问题是在单击按钮时停止模糊功能传播（保持 textarea 聚焦）。

$("#mytextarea").focus(function(){
    $(this).animate({"height": "50px",}, "fast" );
});

$("#mytextarea").blur(function(e){  
        if (e.target.id === 'button'){
         return false;
         e.stopPropagation();
         e.cancelBubble = true;
    }
    else{
    $('#mytextarea').animate({"height": "20px",}, "fast" );
    }
});

我想出的解决方案是替换：

$("#mytextarea").blur(function(e)

和

$(document).click(function(e)

但老实说我不想使用document.click，我的页面已经很重js，使用这种方法会变慢。这是一个小提琴

4

4 回答 4

3

所以几个小时后我让它工作了，不是很漂亮，但经过多次测试后似乎没问题。

var mousedownHappened = false;
$("#mytextarea").focus(function(){
    $(this).animate({"height": "50px",}, "fast" );
});

$('#mytextarea').blur(function() {
    if(mousedownHappened) // cancel the blur event
    {

        mousedownHappened = false;
    }
    else   // blur event is okay
    {
  $("#mytextarea").animate({"height": "20px",}, "fast" ); 
    }
});

$('#button').mousedown(function() {
    mousedownHappened = true;
});

这是@Alex b 在这个问题中的一个工作演示信用：如何在单击 jQuery 中的链接时防止 blur() 运行？

于 2013-07-23T01:57:46.720 回答
0

从选定的答案中，我尝试使用它，但我发现了一个问题。也就是说，如果文本区域已展开并且您单击按钮两次以上，则动画不起作用如果我没有两次聚焦/模糊。所以我有另一个解决方案。

在这种情况下，停止传播是最漂亮的解决方案

见JSFiddle

$(document).ready(function () {

    $("#mytextarea").focus(function (e) {
        $(this).animate({
            "height": "50px",
        }, "fast");
    });

    $('#button').click(function (e) {
        e.stopPropagation();
    });

    $(document).click(function (e) {
        $("#mytextarea").animate({
            "height": "20px",
        }, "fast");
    });

});
于 2014-05-15T10:55:42.180 回答
0 
$("#mytextarea").focus(function(){
    $(this).animate({"height": "50px",}, "fast" );
});

$("#mytextarea").blur(function(e){  
     if (e.target.id === 'button'){
         e.cancelBubble = true;
         return false; // return needs to be last
    }
    // don't use else when you're returning because it's not needed        
    $('#mytextarea').animate({"height": "20px",}, "fast" );
});
于 2013-07-22T23:08:53.337 回答
0

您可以使用“focusout”事件，而不是使用“blur”事件。它类似于模糊，但在 DOM 树中冒泡。请参阅此stackoverflow 答案。

于 2019-01-11T09:32:00.673 回答