Reputation: 2570
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.
Upvotes: 9
Views: 22035
Reputation: 32941
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.
Upvotes: 31
Reputation: 176
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.
Upvotes: 4
Reputation: 2570
In this case, because the button contains a span, sometimes the user was clicking on the button itself, and sometimes on the span within. Hence, to reliably blur the button I needed:
event.target.blur();
event.target.parentNode.blur();
Upvotes: 2