javascript - 模糊函数事件停止传播

Question

所以我有这个在 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(function(e)

但老实说，我不想使用 document.click，我的页面已经很依赖 js，使用这种方法会使它变得很慢。这是一个 Fiddle

Answer 1

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

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

这是一个有效的 Demo在这个问题中归功于@Alex b:how to prevent blur() running when clicking a link in jQuery?