Ejemplo de Dom Element.setPointerCapture

los setPointerCapture() método del Element La interfaz se utiliza para designar un elemento específico como el capturar objetivo de futuros eventos de puntero. Los eventos posteriores para el puntero se dirigirán al elemento de captura hasta que se libere la captura (a través de Element.releasePointerCapture() o la pointerup evento se dispara).

Nota: Cuando se establece la captura de puntero, pointerover, pointerout, pointerenter, y pointerleave los eventos solo se generan al cruzar el límite del objetivo de captura. Esto tiene el efecto de suprimir estos eventos en todos los demás elementos.

Descripción general de la captura de puntero

Captura de puntero permite eventos para un particular evento de puntero (PointerEvent) para ser redirigido a un elemento en particular en lugar del normal (o prueba de golpe) apuntar a la ubicación de un puntero. Esto se puede usar para garantizar que un elemento continúe recibiendo eventos de puntero incluso si el contacto del dispositivo puntero se mueve fuera del elemento (como al desplazarse o desplazarse).

Sintaxis

targetElement.setPointerCapture(pointerId);

Parámetros

pointerId

los pointerId de un PointerEvent objeto.

Valor devuelto

Este método devuelve undefined.

Excepciones

Ejemplo

Este ejemplo establece la captura de puntero en un

<divid="slider">SLIDE MEdiv>

divwidth: 140px;height: 50px;display: flex;align-items: center;justify-content: center;background: #fbe;

functionbeginSliding(e)
  slider.onpointermove = slide;
  slider.setPointerCapture(e.pointerId);functionstopSliding(e)
  slider.onpointermove =null;
  slider.releasePointerCapture(e.pointerId);functionslide(e)
  slider.style.transform =`translate($e.clientX -70px)`;const slider = document.getElementById('slider');

slider.onpointerdown = beginSliding;
slider.onpointerup = stopSliding;