событие.цель.blur() не работает

У меня есть ряд кнопок Bootstrap, таких как: 

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

Но первая строка метода getPage не работает: 

event.target.blur();

Что очень странно, потому что у меня есть еще одна кнопка в другом компоненте, на котором происходит событие.тагет.blur() работает отлично: 

<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>

Кто-нибудь знает, почему это может быть?

EDIT: я думаю, что когда я нажимаю внутри промежутка, размытие не работает.

EDIT: о, хорошо, я решил это - мне тоже нужно event.target.parentNode.blur().

3 2
javascript vue.js

3 ответа:

Вы, вероятно, хотите использовать

event.currentTarget.blur()

Это всегда будет элемент, к которому вы прикрепили прослушиватель событий, где as event.target - это элемент, из которого произошло событие.

3

В этом случае, поскольку кнопка содержит промежуток, иногда пользователь нажимал на саму кнопку, а иногда на промежуток внутри. Следовательно, чтобы надежно размыть кнопку, Мне нужно:

event.target.blur();
event.target.parentNode.blur();
0

Я бы рассмотрел использование

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

Вместо навигации по узлам, так как она менее подвержена ошибкам при изменении разметки.

0