Enter на кнопке вызывает событие click

Опубликовано в JavaScript • 08 августа 2019 г. • 1 мин. на чтение

Для меня стал небольшим открытием следующий факт:

Нажатие клавиш Enter и Space на элементах <button> и <a> помимо событий клавиатуры (keydown) вызывает событие клика мыши click

Соответственно, в то время как обработчик «onclick» звучит так, как будто оно связан только с мышью, в действительности к нему добавлются действие по умолчанию для ссылки и кнопки.

В интересную ситуацию можно попасть, если повешеать обработчик какого-нибудь переключателя toggle на keydown и click. Нажатие enter в таком случае визуально не будет работать т.к. toggle будет вызываться 2 раза.

Похожие записи

RxJS. Delay from array 

import { of, from } from 'rxjs'; 
import { map, concatMap, delay } from 'rxjs/operators';

from([2,4,6,8]).pipe(
  concatMap(item => of(item).pipe(delay(1000)))
).subscribe(console.log);

Не ставить фокус по клику

Проблема заключалась в следующем: когда имеется интерактивный элемент с :focus стилем и вы щелкаете по этому элементу, на нём остаётся focus стиль (outline обводка). У нативной кнопки всё работает as expected, но стоит её добавить любой стиль и, как побочный эффект, меняется её поведение.