Onblur event cancels the onclick event in jQuery or pure Javascript

Question

I have a field textarea and a "send" button just below, and added an event onfocus and onblur in that field. The onfocus increases the height of the field, and the onblur back to normal. I also added an event onclick on the "send" button to validate the field textarea. However, the event onblur is "undoing" on the first click of the event onclick from the "send" button. The code is this:

HTML:

<textarea id="meutexto"></textarea>
<br>
<div id="botao">
<input type="button" value="enviar" />
</div>

Script:

$("#meutexto")
.on('focus',function(){
    $(this).css('height','60px');
})
.on('blur',function(){
    $(this).css('height','30px');
});

$("#botao input").on('click',function(){
    $("#botao").html('Enviando texto...');
});

It turns out that by clicking the "send" button 1 time, nothing happens. Only the second click that the DIV "boot" is changed to "Enviando texto...".

In case I pay the lines:

.on('blur',function(){
    $(this).css('height','30px');
});

The script works. However I would not like to remove the onblur. I wonder what’s wrong?

Answer 1

It’s easy to solve, very easy, just change onclick by onfocus, that’s right, use onfocus on the button is so simple, pay attention that in css there is :Hover and :Focus

When you hover the mouse over the element fires the :Hover, but to fire the :Focus you need to select (click) the element and even after taking the cursor from the top continues with the different :Focus of the Hover, finally when using onfocus on the button you will have no problem as the onfocus continues even after moving the course or the element from below the cursor.

And it’s sure as hell onfocus: <input type="button" value="funciona" onfocus="function()"/>

Answer 2

Do this with CSS, it’s a common problem this event conflict.

$("#botao input").on('click', function() {
    $("#botao").html('Enviando texto...');
});

textarea {
    height: 30px;
    transition: height .5s;
}

textarea:focus {
    height: 60px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="meutexto"></textarea>
<br>
<div id="botao">
    <input type="button" value="enviar" />
</div>

Answer 3

I was intrigued by the "conflict" of events, and testing some details I came to the conclusion that it is not conflict. It turns out that in windows if you click a button, drag the mouse out and drop, the click will not be effectively fired, regardless of the application, will always have this "feature" to give up a click.

So if you pin the button in place it does not drag out of the mouse with the textarea Blur, the click will run normally.

Glad you solved with pure CSS, but if you had other functions to perform on onblur, it’s good to know how to solve...

$("#meutexto")
.on('focus',function(){
    $(this).css('height','60px');
})
.on('blur',function(){
    $(this).css('height','30px');
});

$("#botao input").on('click',function(){
    $("#botao").html('Enviando texto...');
});

div {
  height: 100px
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<textarea id="meutexto"></textarea>
</div>
<span id="botao">
<input type="button" value="enviar" />
</span>