Javascript 模糊函数事件停止传播

因此，我有一个文本区域，它在focus（）上展开，并返回到blur（）上的原始位置。
我遇到的问题是在单击按钮时停止模糊函数传播（保持文本区域聚焦）

$("#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，我的页面已经有大量的js内容，使用这种方法会使页面速度变慢。这里有一个

，所以在几个小时后，我让它工作起来，它并不漂亮，但经过多次测试后，它看起来还行

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有一个可用的积分：

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

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

看

您可以使用“focusout”事件，而不是使用“blur”事件。它类似于模糊，但会在DOM树中出现气泡。

---

看看这个。

三件事。return语句后的代码不执行。您不需要手动执行

e.cancelBubble=true；jQuery规范化了冒泡的预防-只需调用
e.stopPropagation（）
，您就可以开始了。使用
返回false在事件处理程序中有效地执行与手动调用
e.preventDefault（）
和
e.stopPropagation（）
…相同的操作，因此您不需要您所拥有的-选择要使用的内容。@Ian好吧，我只是用just.stopPropagation（）尝试了它，但结果是一样的，谢谢，虽然对我来说有点晚了，但我认为这可能是有关联的：。目标
id
将始终是
mytextarea
而不是
button
，因此这不起作用。@matmar10抱歉，这不起作用。您可能想检查一下my qI中的演示，其中onBlur事件触发了reactjs中的状态更改，并且此解决方案运行良好。
$("#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" );
});

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

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

});