CODEWITHSUNDEEP
javascriptjquery
Aaron
Aaron

Reputation: 181

Blur function event stop propagation

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

Upvotes: 3

Views: 9193

Answers (4)

ara
ara

Reputation: 566

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.

Upvotes: 0

MD SHAHIDUL ISLAM
MD SHAHIDUL ISLAM

Reputation: 14523

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

});

Upvotes: 0

Aaron
Aaron

Reputation: 181

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?

Upvotes: 3

matmar10
matmar10

Reputation: 21

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

Upvotes: 0

Related Questions