Update article.md

Author: Alexandre887

2-ui/3-event-details/6-pointer-events/article.md

@@ -186,17 +186,21 @@
 
 [iframe src="slider-html" height=40 edit]
 
+<p></p>
+
+
+
 Затем он работает так:
 
-1. Пользователь сначала нажимает на ползунок - срабатывает `pointerdown`.
-2. Затем двигает указателем его - срабатывает `pointermove`, и мы передвигаем ползунок вместе с ним.
+1. Пользователь сначала нажимает на ползунок `thumb` - срабатывает `pointerdown`.
+2. Затем двигает его указателем - срабатывает `pointermove`, и наш код перемещает элемент `thumb`.
     - ...Причём, по мере движения, указатель может покидать ползунок - перемещаться выше или ниже. При этом ползунок должен передвигаться строго по горизонтали, на одной линии с указателем.
 
-Так что для полного отслеживания перемещения указателя, включая ниже и выше ползунка, нам пришлось поставить обработчик  `pointermove` на весь документ `document`.
+В решении, основанном на событиях мыши, для отслеживания всех движений указателя, включая те, которые происходят выше/ниже элемента `thumb`, мы должны были назначить обработчик события `mousemove` на весь документ `document`.
 
-Такое решение выглядит слегка "грязным". Одна из проблем - это то, что движения указателя по документу могут вызвать сторонние эффекты, заставить сработать другие обработчики, не имеющие отношения к слайдеру.
+Однако это не самое правильное решение. Одна из проблем - это то, что движения указателя по документу могут вызвать сторонние эффекты, заставить работать другие обработчики (например, `mouseover`), не имеющие отношения к слайдеру.
 
-Захват указателя позволяет привязать `pointermove` к `thumb` и избежать любых подобных проблем:
+Именно здесь вступает в игру `setPointerCapture`:
 
 - Мы можем вызывать `thumb.setPointerCapture(event.pointerId)` в обработчике `pointerdown`,
 - Тогда дальнейшие события указателя до `pointerup/cancel` будут привязаны к `thumb`. 
@@ -208,24 +212,37 @@
 
 ```js
 thumb.onpointerdown = function(event) {
-  // все события указателя перенаправить на thumb (пока не произойдёт 'pointerup')
+  // перенацелить все события указателя (до pointerup) на thumb
   thumb.setPointerCapture(event.pointerId);
+  // начать отслеживание перемещения указателя
+  thumb.onpointermove = function(event) {
+    // перемещение слайдера: отслеживание thumb, т.к все события указателя перенацелены на него 
+    let newLeft = event.clientX - slider.getBoundingClientRect().left;
+    thumb.style.left = newLeft + 'px';
+  };
+  // если сработало событие pointerup, завершить отслеживание перемещения указателя 
+  thumb.onpointerup = function(event) {
+    thumb.onpointermove = null;
+    thumb.onpointerup = null;
+    // ...при необходимости также обработайте "конец перемещения"
+  };
 };
-
-thumb.onpointermove = function(event) {
-  // перемещение ползунка: все события перенаправлены на этот обработчик
-  let newLeft = event.clientX - slider.getBoundingClientRect().left;
-  thumb.style.left = newLeft + 'px';
-};
-
-// примечание: нет необходимости вызывать thumb.releasePointerCapture, 
-// при срабатывании события 'pointerup' это происходит автоматически
+// примечание: нет необходимости вызывать thumb.releasePointerCapture,
+// это происходит автоматически при pointerup
 ```
 
 ```online
 Полное демо:
 
 [iframe src="slider" height=100 edit]
+
+<p></p>
+
+В демонстрационном примере также имеется дополнительный элемент с обработчиком `onmouseover`, показывающий текущую дату.
+
+Обратите внимание: пока вы перетаскиваете ползунок, вы можете навести курсор на этот элемент, и его обработчик *не сработает*.
+
+Таким образом, благодаря `setPointerCapture` перетаскивание теперь не имеет побочных эффектов.
 ```
 
 Таким образом, мы имеем два бонуса: