Блог

Я использую веб-узел Blazor и пытаюсь разместить кнопку на веб-странице, которая должна работать в настольных браузерах с помощью мыши, а также на мобильных устройствах с помощью сенсорного экрана. Однако на мобильном устройстве я хочу, чтобы кнопка немедленно реагировала на прикосновение, а не ждала, пока пользователь отпустит ее.

Кроме того, мне нужно убедиться, что он не запускает один и тот же код дважды на мобильном телефоне, поэтому я ввел preventDefault=true его.

Поэтому я пришел к следующему выводу:

 <button
    @onclick="e => ToggleFlag(flag)"                                                
    @ontouchstart="e => ToggleFlag(flag)"
    @ontouchstart:preventDefault=true>
        @flag.DisplayValue
</button>
 

Я думал, что приведенный выше код будет работать, но, к сожалению, Chrome отвечает следующим «вмешательством», когда я эмулирую событие касания:

блейзор.webassembly.js:1 [Вмешательство] Не удалось предотвратить дефолт внутри пассивного прослушивателя событий из-за того, что цель рассматривается как пассивная. Видишь https://www.chromestatus.com/features/5093566007214080

Покопавшись еще немного, я нашел кое-какую полезную информацию здесь и здесь.

Что я из этого извлекаю, так это то , что Blazor по умолчанию регистрирует свои прослушиватели событий касания {passive: true} , что означает, что Chrome не позволит их использовать preventDefault , и, насколько мне известно, я не могу сказать Blazor, чтобы он использовал {passive: false} .

Я также попытался удалить @ontouchstart:preventDefault=true при применении touch-action: none; стиля к кнопке, что не помогло, так как это просто привело к тому, что оба слушателя были вызваны при касании.

Какое здесь может быть возможное решение?

Спасибо!

ps. в качестве обходного пути я прибегнул к дублированию кнопки (каждое прослушивание другого события) и использованию CSS-медиа-запросов для отображения/скрытия соответствующей кнопки в зависимости от того, находимся ли мы в настольном или мобильном режиме. Не идеальная ИМО и кажется немного взломом.