Артём

В данном куске кода не идёт, но вообще в случаях, когда нужно отменить стандартное действие браузера (а обновление страницы это чаще всего оно и есть), используйте preventDefault
Статья по теме: https://learn.javascript.ru/default-browser-action

Ну jquery никто не отменял
А если хочешь провести время с пользой, клепая лендинги, посмотри в сторону Vue, достаточно лёгкий фреймворк + если освоишь его, в дальнейшем будет легче найти работу.

https://vuejs-tips.github.io/vue-the-mask/
Сейчас на проекте используем эту библиотеку. Легковесная, удобная в использовании, лучше не найти. Только самому писать.

Свойство breakpoints

var swiper = new Swiper('.swiper-container', {
  // Default parameters
  slidesPerView: 1,
  spaceBetween: 10,
  // Responsive breakpoints
  breakpoints: {
    // when window width is >= 320px
    320: {
      slidesPerView: 2,
      spaceBetween: 20
    },
    // when window width is >= 480px
    480: {
      slidesPerView: 3,
      spaceBetween: 30
    },
    // when window width is >= 640px
    640: {
      slidesPerView: 4,
      spaceBetween: 40
    }
  }
})

Вам нужно добавить к элементу свойство outline со значением none, как сказали выше. Но хочу добавить, что бы вы были осторожны и попытались дать понять пользователю, что он навёл на эту кнопку любым другим способом, это нужно для доступности.
Рекомендуется предусмотреть индивидуальные стили фокусировки, которые улучшают пользовательский интерфейс и соответствуют вашему дизайну.
Статья в тему:
https://medium.com/@ABatickaya/%D0%B4%D1%83%D0%BC%...