Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

event.target.blur() not working

I have a series of Bootstrap buttons like this:

<button :disabled="page === lastPage" type="button" class="btn btn-default" @click="getPage(lastPage)">
    <span class="glyphicon glyphicon-forward"></span>
</button>

But the first line of the getPage method does not work:

event.target.blur();

Which is very strange, because I have another button in another component, on which event.taget.blur() works perfectly:

<button class="btn btn-default pull-right" @click="show()" type="button">Batch
    <span :class="{'glyphicon glyphicon-chevron-down': showForm, 'glyphicon glyphicon-chevron-up': !showForm}"></span>
</button>

Does anyone know why this might be?

EDIT: I think it's when I click inside the SPAN that the blur doesn't work.

EDIT: oh well I solved it - I also need event.target.parentNode.blur() as well.

like image 232
daninthemix Avatar asked Dec 19 '16 15:12

daninthemix


2 Answers

You likely want to use

event.currentTarget.blur()

That will always be the element you attached the event listener to where as event.target is the element the event originated from.

like image 117
Bill Criswell Avatar answered Oct 28 '22 13:10

Bill Criswell


I would consider using

if (document.activeElement != document.body) {
    document.activeElement.blur()
}

rather than navigating through nodes as it is less prone to error if the mark up changes.

like image 45
Jack senior Avatar answered Oct 28 '22 13:10

Jack senior