Ponteiro

[Tradução Beta Não Oficial]

Esta página foi traduzida por PageTurner AI (beta). Não é oficialmente endossada pelo projeto. Encontrou um erro? Reportar problema →

pointer(input: PointerInput): Promise<void>

A API pointer permite simular interações com dispositivos apontadores. Ela aceita uma única ação de ponteiro ou um array delas.

type PointerInput = PointerActionInput | Array<PointerActionInput>

Nosso público-alvo principal testa via jest em ambiente jsdom e não há layout no jsdom. Isso significa que, diferente do seu navegador, os elementos não existem em posição, camada ou tamanho específicos.
Não tentamos determinar se a ação descrita é possível naquela posição do seu layout.

Ação do ponteiro

Existem dois tipos de ações: pressionar e mover.

Pressionando um botão ou tocando a tela

Uma ação é considerada de pressionamento quando define uma tecla para ser pressionada, liberada ou ambas.

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

Você pode declarar múltiplas ações de pressionamento (na mesma posição) de uma vez, que serão resolvidas internamente como múltiplas ações. Se não precisar declarar outras propriedades, basta fornecer a string keys.

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

Para pressionar um botão sem soltá-lo, o nome do botão recebe o sufixo >.
Para apenas liberar um botão previamente pressionado, a tag começa com /.

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

Quais botões estão disponíveis depende do pointerMap.

Movendo um ponteiro

Toda ação que não é de pressionamento descreve um movimento do ponteiro.

Você pode declarar qual ponteiro será movido através da propriedade pointerName. O valor padrão é mouse.

Note que o ponteiro mouse (pointerId: 1) é o único que sempre existe e tem posição definida. Um ponteiro touch só existe durante o toque na tela e recebe um novo pointerId a cada interação. Para esses ponteiros, usamos o nome do "botão" da ação de pressionamento 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]'},
])

Posição do ponteiro

PointerTarget

interface PointerTarget {
  target: Element
  coords?: PointerCoords
}

As propriedades PointerTarget permitem descrever a posição do ponteiro no documento.
As coords fornecidas são aplicadas diretamente ao MouseEvent resultante e podem ser omitidas.
O target deve ser o elemento que recebe o input do ponteiro no navegador, sendo o elemento mais superior que pode receber eventos naquelas coordenadas.

SelectionTarget

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

Ações do ponteiro podem alterar a seleção no documento.
No navegador, cada posição do ponteiro corresponde a uma posição DOM: um nó DOM e um deslocamento que normalmente traduz para o caractere mais próximo.
Como em ambientes sem layout todos os caracteres estão na mesma posição, assumimos que a posição do ponteiro está mais próxima do último descendente do target.

Se você fornecer offset, assumimos que a posição do ponteiro está mais próxima do caractere offset-th em target.textContent.

Se você também fornecer node, tratamos node e offset como a posição DOM exata para qualquer seleção.

// 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>