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 に重きを置いており、この方法を使用すると遅くなります。ここにフィドルがあります

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

これは 、この質問で @Alex b に贈られるデモのクレジットです: how to prevent blur() running when click a link in jQuery?

Answer 2

選択した回答から使用してみましたが、問題が見つかりました。つまり、テキストエリアが展開され、ボタンを 2 回以上クリックすると、アニメーションが機能しなくなります。だから私は別の解決策を持っています。

この場合、伝播の停止が最も適切な解決策です

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

});

Answer 3

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