Как у меня возникли проблемы при работе со ссылками в JavaScript

Как у меня возникли проблемы при работе со ссылками в JavaScript

От автора: моя ошибка была связана с тем, что JavaScript мешает просматривать страницы в Интернете. Простые, но стандартные вещи, такие как время до первого взаимодействия задерживались без уважительной причины, в моем случае, это были ссылки, которые не работали как ссылки.

Я тоже виноват в этом, так что этот пост — это мое признание и (в идеале) попытка помешать мне сделать это снова. Давайте разбираться, какую ошибку я допускал при работе со ссылками в JavaScript.

Click

Все начинается с небольшого свойства click, а затем все идет по нарастающей. Предположительно по уважительной причине я решил заняться нативной обработкой браузером клика посетителя на каком-либо элементе в DOM.

Возможно, мне нужно разместить запрос API в фоновом режиме, обновить какую-то часть пользовательского интерфейса или, возможно, выполнить проверку перед отправкой запроса.

Я использую Next.js для многих проектов. Мне он нравится, потому что он поставляется с поддержкой рендеринга на стороне сервера без настройки и прямо из коробки. Это хорошо.

Из-за того, как работает маршрутизация Next, довольно часто я переопределяю нативный клик браузера, чтобы можно было запускать последующую навигацию, отображаемую клиентом. Это может принести пользу от предварительного извлечения кода (для макета), а также обеспечить действительно приятное и быстрое взаимодействие с пользователем, а также сокращает время прохождения запроса туда-обратно и полезную нагрузку, которая выполняется при клике пользователя.

Я все испортил

Это мой код (React):

<Card onClick={event => { event.preventDefault(); Router.push( `/thing/_single?id=${id}`, // "real" url `/thing/${id}` // URL the browser shows ); }} {...props}
/>

Компонент работает по прямому назначению. Посетитель нажимает на компонент карточки и загружает новый маршрут (файл, в котором он находится ./pages/_single.js), передавая ему строку запроса id=nnn.

Этот компонент может дать сбой в двух случаях. Первый должен (я надеюсь) быть очевидным, второй не столь очевиден.

На полпути к стороне сервера

Я сталкиваюсь с подобными сайтами все чаще и чаще в последнее время. Они используют рендеринг на стороне сервера, чтобы получить выгоду в аспекте SEO и производительности, потому что страница не зависит от загрузки JavaScript. За исключением того, что когда она загружена, она зависит от JavaScript, чтобы фактически реагировать на взаимодействия — например, клик.

В моем коде выше, если подключение к Интернету прерывистое (например, мобильная связь), выбранный элемент (карточка) загружается, но нет нечего, что обрабатывало бы клик, например, элемента анкора.

Итак, теперь у меня есть простое практическое правило: если есть onClick, должен быть анкор вокруг компонента. Как насчет второго случая. Вы увидели его?

Зная лучше, чем браузер

JavaScript позволяет мне делать довольно красивые вещи. К сожалению, есть множество причудливых вещей, которые обрабатывают встроенный функционал браузера, без осмысления или защиты от случайного выбрасывая из окна.

В этом конкретном случае моему посетителю не разрешается нажимать на мой интерактивный компонент каким-либо иным способом, кроме того, который я запланировал . Что довольно самонадеянно с моей стороны.

Что происходит при клике с нажатой клавишей Shift?

Что происходит при клике с нажатой клавишей command (или control)?

Ни одно из этих двух действий не будет работать. Элемент должен открыться в новом окне и новой вкладке соответственно. Это было намерение моих посетителей, так почему я решил, что они больше не могут этого делать? Ответ прост: я не подумал об этом. Это смущало, хуже того — злило — моего посетителя. Исправление — это вопрос нескольких строк, поэтому давайте сделаем это:

<a href={`/thing/${id}`}> <Card onClick={event => { if (event.ctrlKey || event.metaKey || event.shiftKey) { return; // let the browser deal with the click natively } // otherwise handle it with our fancy JavaScript event.preventDefault(); Router.push( `/thing/_single?id=${id}`, // "real" url `/thing/${id}` // URL the browser shows ); }} {...props} />
</a>

Новые эмпирические правила

Каждый раз, когда я добавляю onClickк для компонента, я хочу убедиться, что существует реальный анкор, готовый обработать намеченное действие. Я также хочу убедиться, что обработка модификаторов в браузере работает так, как задумано. Слишком много сайтов не позволяют мне использовать модификаторы клика — я не хочу быть в их числе и злить посетителя.

Источник: https://remysharp.com

Редакция: Команда webformyself.