JavaScript: как не сбрасывать фокус при клике по элементу?

Question

[Snewer]

Здравствуйте!

Имеется и кнопки форматирования текста в div`е. При выделении текста в диве и клике по кнопке происходить следующее:

1. Слетает выделение текста
2. Функция уже ничего не форматирует

Как избавиться от потери фокуса при нажатии по кнопкам? Спасибо.

Answer 1

[link_irk]

Попробуйте обрабатывать нажатие на кнопку по событию onmousedown, а не по клику. onmousedown наступает раньше и вы успеете нормально обработать событие, до потери фокуса. А чтоб выделение вообще не сбросилось напишите в конце обработчика return false;

Comments

[Snewer]

Да, пока так и сделал. Спасибо

[Bodrosh]

Спасибо, на Vue JS помогло (@mousedown вместо @click), чтобы можно было использовать в методах document.execCommand

Answer 2

[benderskiy]

Не стоит выполнять действий по onmousedown — это неверно с точки зрения юзабилити.
Но вот предотвратить сброс выделения нужно.

$('button').on('mousedown', function() {
  // preventDefault and stopPropagation
  return false;
});

$('button').on('click', function() {
  // your action
});

Демо: codepen.io/benderskiy/pen/xClaH

Comments

[Snewer]

Чем это принципиально отличается? Почему неверно?

[Snewer]

1) onmousedown="return false;" onmouseclick="function();"
2) onmousedown="function(); return false;"

Лучше использовать 1 вариант?

[benderskiy]

а) лучше использовать первый вариант, потому что так принято. Когда вы нажимаете указателем мыши по кнопке в любой популярной ОС ничего не происходит. Происходит только тогда, когда вы отпустите указатель находясь на той же кнопке. Это даёт вам, например, шанс передумать и убрать указатель с кнопки. Тогда действие не произойдет. Отклонение от такого поведения будет восприниматься странным.

б) return false; в вашем случае не сработает. Почитайте тут: nazz.me/return-false-preventdefault-stoppropagation