So I have this textarea that expands on focus(), and returns to its original position on blur().
The issue I'm having is to stop the blur function propagation (keep the textarea focused) when a button is clicked.

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

The solution I came up with is to replace:

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

with

$(document).click(function(e)

But honestly I don't want to use document.click, my page is already heavy on js and using this method makes it slow. Here's a Fiddle

So I have this textarea that expands on focus(), and returns to its original position on blur().
The issue I'm having is to stop the blur function propagation (keep the textarea focused) when a button is clicked.

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

The solution I came up with is to replace:

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

with

$(document).click(function(e)

But honestly I don't want to use document.click, my page is already heavy on js and using this method makes it slow. Here's a Fiddle

• javascript
• jquery

Share Improve this question Follow edited Jul 22, 2013 at 22:56 Omar 31.7k99 gold badges7272 silver badges116116 bronze badges asked Jul 22, 2013 at 22:19 AaronAaron 18111 gold badge44 silver badges1212 bronze badges 3

• Three things. Code after a return statement doesn't execute. And you don't need to manually do e.cancelBubble = true;; jQuery normalizes the prevention of bubbling - just call e.stopPropagation() and you should be good to go. Using return false; in an event handler effectively does the same as manually calling e.preventDefault() and e.stopPropagation()...so you don't need what you have - choose what to use. – Ian Commented Jul 22, 2013 at 22:27
• @Ian Well, I just tried it using just .stopPropagation(), but the result was the same, thanks tho – Aaron Commented Jul 22, 2013 at 22:34
• 1 It's a little late for me, but I think this might be of relevance: Delegating the focus and blur events (at Quirksmode). – David Thomas Commented Jul 22, 2013 at 23:07

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

So after a couple of hours I got it working, is not pretty, but after many tests appears to be ok.

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

Here is a working Demo credit goes to @Alex b in this question: how to prevent blur() running when clicking a link in jQuery?

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

From the selected answer I have tried it to use but I have found a problem. That is If the textarea is expanded and you click the button more than two times then animation does not work If I did not focus/blur two times. So I have got another solution.

Stop Propagation is most pretty solution in this case

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

});

Instead of using the "blur" event, you could use the "focusout" event. It is similar to blur but bubbles up through the DOM-tree. See this stackoverflow answer.