Puntero

[Traducción Beta No Oficial]

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

pointer(input: PointerInput): Promise<void>

La API pointer permite simular interacciones con dispositivos de puntero.
Acepta una única acción de puntero o un array de ellas.

type PointerInput = PointerActionInput | Array<PointerActionInput>

Nuestro público objetivo principal prueba con jest en entorno jsdom,
y no existe maquetación en jsdom. Esto significa que, a diferencia de tu navegador,
los elementos no existen en posiciones, capas o tamaños específicos.
No intentamos determinar si la acción de puntero que describes es posible
en esa posición de tu maquetación.

Acción de puntero

Existen dos tipos de acciones: pulsación y movimiento.

Pulsar un botón o tocar la pantalla

Una acción de puntero es de pulsación si define una tecla para presionar,
liberar, o ambas acciones.

pointer({keys: '[MouseLeft]'})

Puedes declarar múltiples acciones de pulsación (en la misma posición)
simultáneamente, que se resolverán internamente como múltiples acciones.
Si no necesitas declarar otras propiedades, también puedes simplemente
proporcionar el string keys.

pointer({keys: '[MouseLeft][MouseRight]'})
// or
pointer('[MouseLeft][MouseRight]')

Para pulsar un botón sin liberarlo, el nombre del botón lleva el sufijo >.
Para liberar un botón previamente pulsado, la etiqueta comienza con /.

pointer('[MouseLeft>]') // press the left mouse button
pointer('[/MouseLeft]') // release the left mouse button

Los botones disponibles dependen del
pointerMap.

Mover un puntero

Toda acción de puntero que no sea de pulsación describe un movimiento.

Puedes declarar qué puntero se mueve mediante la propiedad pointerName.
Por defecto es mouse.

Nota que el puntero mouse (pointerId: 1) es también el único que
siempre existe y tiene posición. Un puntero touch solo existe mientras
se toca la pantalla y recibe un nuevo pointerId cada vez. Para estos punteros,
usamos el nombre del "botón" de la acción de pulsación como pointerName.

pointer([
  // touch the screen at element1
  {keys: '[TouchA>]', target: element1},
  // move the touch pointer to element2
  {pointerName: 'TouchA', target: element2},
  // release the touch pointer at the last position (element2)
  {keys: '[/TouchA]'},
])

Posición del puntero

PointerTarget

interface PointerTarget {
  target: Element
  coords?: PointerCoords
}

Las props PointerTarget permiten describir la posición del puntero en el documento.
Las coords que proporciones se aplican directamente al
MouseEvent resultante
y pueden omitirse.
El target debe ser el elemento que recibe la entrada del puntero en el navegador:
el elemento superior que puede recibir eventos de puntero en esas coordenadas.

SelectionTarget

interface SelectionTarget {
  node?: Node
  offset?: number
}

Las acciones de puntero pueden alterar la selección en el documento.
En el navegador, cada posición del puntero corresponde con una posición DOM:
un nodo DOM y un desplazamiento DOM que normalmente se traduce al carácter
más cercano a la posición del puntero.
Como todos los caracteres en un entorno sin maquetación están en la misma posición,
asumimos que la posición del puntero está más cerca del último descendiente
del target del puntero.

Si proporcionas offset, asumimos que la posición del puntero está más cerca
del carácter número offset-th de target.textContent.

Si también proporcionas node, tratamos node y offset como la posición DOM exacta
a usar para cualquier selección.

// element: <div><span>foo</span><span>bar</span></div>
// | marking the cursor.
// [ ] marking a selection.

pointer({target: element, offset: 2, keys: '[MouseLeft]'})
// => <div><span>fo|o</span><span>bar</span></div>

pointer([{target: element, offset: 2, keys: '[MouseLeft>]'}, {offset: 5}])
// => <div><span>fo[o</span><span>ba]r</span></div>

pointer({target: element, node: element, offset: 1, keys: '[MouseLeft]'})
// => <div><span>foo</span>|<span>bar</span></div>