Como cancelar eventos em javascript?

Ao atualizar uma página da web ou o site, há situações em que alguns links incluídos não são mais necessários ou se tornam irrelevantes. Além disso, gerenciando o tráfego de um determinado site de maneira eficaz. Nesses casos, o cancelamento dos eventos em JavaScript faz maravilhas para desativar algumas funcionalidades e lidar com esses cenários.

Como cancelar eventos em javascript?

As abordagens a seguir podem ser utilizadas para cancelar eventos em JavaScript:

• • ““PreventDefault ()”Método.
  • ““Valor booleano" abordagem.
  • ““StopPropagation ()”Método.

Abordagem 1: Cancelar eventos em JavaScript usando o método DeventDefault ()

O "PreventDefault ()”Método cancela o evento em anexo se for cancelado. Este método pode ser utilizado para destacar o evento em anexo do link acessado, impedindo assim que a ação seja executada.

Sintaxe

evento.PreventDefault ()

Na sintaxe dada:

• • ““evento”Refere -se ao evento a ser destacado.

Exemplo

Passe pelo snippet de código abaixo:

O evento de clique será cancelado!

Visite o site do Google
documento.getElementById ("site").addEventListener ("clique", função (cancel)
cancelar.prevenvDefault ();
);

Siga as etapas abaixo do ponto abaixo:

• • Em primeiro lugar, inclua o cabeçalho declarado a ser exibido no Modelo de Objeto do Documento (DOM).
  • Depois disso, especifique o “Url”Usando o“Href”Atributo.
  • Agora, na parte JavaScript do Código, acesse o URL especificado.
  • Além disso, anexe um “clique”Evento com o URL com a ajuda de uma função usando o“addEventListener ()”Método.
  • Finalmente, o "PreventDefault ()”O método será aplicado com a ajuda do parâmetro da função para destacar o evento em anexo.

Saída

Abordagem 2: Cancelar eventos em JavaScript retornando um valor booleano

Esta abordagem pode ser implementada retornando o “falso”Valor booleano no evento acionado.

Exemplo

As seguintes linhas de código demonstram o conceito declarado:

função cancevent ()
retorna falso;
alerta ("Esta declaração não será exibida")

No trecho de código acima:

• • Primeiro, dentro do “”Tag, aloque um campo de texto de entrada.
  • Além disso, anexe um “oninputEvento com o especificado “espaço reservado" valor. Isso resultará em invocar a função especificada ao inserir o texto.
  • Agora, na parte JavaScript do Código, declare uma função chamada “cancevent ()”. Em sua definição, retorne o valor booleano “falso”Para cancelar o incluído“evento”.
  • Finalmente, especifique a mensagem declarada na caixa de alerta. O valor booleano retornado resultará em evitar a caixa de diálogo a ser exibida.

Saída

Na saída acima, pode -se observar que, após a função acessada, a caixa de diálogo alerta não é exibida assim cancelando o evento em anexo.

Abordagem 3: Cancelar eventos em JavaScript usando o método stopPropagation ()

O "StopPropagation ()”O método impede que o mesmo evento seja propagado. Este método pode ser utilizado para parar de propagar entre os dois divs ao verificar a caixa de seleção.

Sintaxe

evento.StopPropagation ()

Exemplo

Observe as seguintes linhas de código:

Clique no site para observar a mudança:

Linuxhint
Local na rede Internet

• • Na primeira etapa, da mesma forma, inclua o cabeçalho declarado.
  • Agora, inclua dois “div”Tags com anexo“ONCLICKEventos com cada um deles invocando duas funções diferentes elemento2 () e elemento1 ().
  • Além disso, inclua uma caixa de seleção com o ID especificado. Esta caixa de seleção resultará em interromper a propagação entre dois divs.

Agora, veja as seguintes linhas de código JavaScript:

elemento da função1 (e)
Alert ("Site você clicou");
if (documento.getElementById ("check").verificado)
e.StopPropagation ();


função element2 ()
alerta ("você clicou em Linuxhint");

No código JS acima:

• • Defina uma função chamada “Element1 ()”. Aqui, o parâmetro “e" refere-se a "evento”Sendo demitido especificado na parte HTML do código.
  • Em sua definição, exiba a caixa de diálogo alerta com a mensagem declarada.
  • Depois disso, acesse a caixa de seleção criada por seu ID usando o “getElementById ()”Método. Além disso, aplique o “verificado”Propriedade para ele para verificar a condição da caixa de seleção verificada.
  • Então, aplique o “StopPropagation ()”Método referente ao parâmetro“e”. Isso resultará em interromper a propagação de uma função para a outra função.
  • Da mesma forma, defina outra função “Element2 ()“Para ser propagado a. Esta função será funcional antes da propagação apenas.

Saída

Aqui, observa o comportamento ao clicar na divisão ao verificar a caixa de seleção.

Compilamos as abordagens para cancelar eventos em javascript.

Conclusão

O "PreventDefault ()”Método, o“valor booleano"Abordagem, ou a"StopPropagation ()”O método pode ser utilizado para cancelar eventos em JavaScript. O primeiro método pode ser implementado para destacar o evento anexado, resultando em desativar o link. A abordagem de valor booleano retorna o “falso”Valor booleano no evento acionado. O método stopPropagation () pode ser aplicado para parar de propagação entre os dois divs com a ajuda de uma caixa de seleção incluída. Este tutorial explicou para cancelar eventos em JavaScript.