|
22 | 22 |
|
23 | 23 | Если вы не разрабатываете под старые браузеры, такие как Internet Explorer 10, Safari 12, или более ранние версии, больше нет необходимости использовать события мыши или касаний – можно переходить сразу на события указателя. |
24 | 24 |
|
25 | | -При этом ваш код будет корретно работать и с сенсорными устройствами и с мышью. Впрочем, у событий указателя есть важные особенности, которые нужно знать, чтобы их правильно использовать, без лишних сюрпризов. Мы отметим их в этой статье. |
| 25 | +При этом ваш код будет корректно работать и с сенсорными устройствами и с мышью. Впрочем, у событий указателя есть важные особенности, которые нужно знать, чтобы их правильно использовать, без лишних сюрпризов. Мы отметим их в этой статье. |
26 | 26 |
|
27 | 27 | ## Типы событий указателя |
28 | 28 |
|
|
44 | 44 | Как мы видим, для каждого `mouse<события>` есть соответствующее `pointer<событие>`, которое играет аналогичную роль. Также есть 3 дополнительных события указателя, у которых нет соответствующего аналога `mouse...`, скоро мы их разберём. |
45 | 45 |
|
46 | 46 | ```smart header="Замена `mouse<событий>` на `pointer<события>` в коде" |
47 | | -Мы можем заменить события `mouse...` на аналогичные `pointer...` в коде и быть увереными, что с мышью по-прежнему всё будет работать нормально. |
| 47 | +Мы можем заменить события `mouse...` на аналогичные `pointer...` в коде и быть уверенными, что с мышью по-прежнему всё будет работать нормально. |
48 | 48 |
|
49 | 49 | При этом поддержка сенсорных устройств "волшебным" образом улучшится. Хотя, возможно, кое-где понадобится добавить `touch-action: none` в CSS. Подробнее мы разберём это ниже, в секции про `pointercancel`. |
50 | 50 | ``` |
|
81 | 81 |
|
82 | 82 | 1. При касании первым пальцем: |
83 | 83 | - происходит событие `pointerdown` со свойством `isPrimary=true` и некоторым `pointerId`. |
84 | | -2. При касании втором и последующими пальцами (при остающемся первом): |
| 84 | +2. При касании вторым и последующими пальцами (при остающемся первом): |
85 | 85 | - происходит событие `pointerdown` со свойством `isPrimary=false` и уникальным `pointerId` для каждого касания. |
86 | 86 |
|
87 | 87 | Обратите внимание: `pointerId` присваивается не на всё устройство, а для каждого касающегося пальца. Если коснуться экрана 5 пальцами одновременно, получим 5 событий `pointerdown`, каждое со своими координатами и индивидуальным `pointerId`. |
88 | 88 |
|
89 | 89 | События, связанные с первым пальцем, всегда содержат свойство `isPrimary=true`. |
90 | 90 |
|
91 | | -Мы можем отслеживать несколько касающихся экрана пальцев, используя их `pointerId`. Когда пользовтаель перемещает, а затем убирает палец, получаем события `pointermove` и `pointerup` с тем же `pointerId`, что и при событии `pointerdown`. |
| 91 | +Мы можем отслеживать несколько касающихся экрана пальцев, используя их `pointerId`. Когда пользователь перемещает, а затем убирает палец, получаем события `pointermove` и `pointerup` с тем же `pointerId`, что и при событии `pointerdown`. |
92 | 92 |
|
93 | 93 | ```online |
94 | 94 | Вот небольшое демо, выводящее события `pointerdown` и `pointerup`: |
@@ -235,7 +235,7 @@ thumb.onpointermove = function(event) { |
235 | 235 |
|
236 | 236 | События указателя расширяют события мыши. Мы можем заменить `mouse` на `pointer` в названиях событий и код продолжит работать для мыши, при этом получив лучшую поддержку других типов устройств. |
237 | 237 |
|
238 | | -При обработке переносов и сложных касаний, которые браузер может попытаться обработать сам, не забывайте отменять действие брауера и ставить `touch-events: none` в CSS для элементов, с которыми мы взаимодействуем. |
| 238 | +При обработке переносов и сложных касаний, которые браузер может попытаться обработать сам, не забывайте отменять действие браузера и ставить `touch-events: none` в CSS для элементов, с которыми мы взаимодействуем. |
239 | 239 |
|
240 | 240 | Дополнительные возможности событий указателя: |
241 | 241 |
|
|
0 commit comments