Ir para conteúdo
Fórum Script Brasil
  • 0

(Resolvido) event.stopPropagation


Rafael Laurindo

Pergunta

6 respostass a esta questão

Posts Recomendados

  • 0

O event.stopPropagation impede que o evento se propague para o elemento-pai do objeto em que ocorreu.

Exemplificando:

<html>
<head>
    <title>Test</title>
    <script type="text/javascript">
        onload = function () {
            var principal = document.getElementById("principal")
            var secundario = document.getElementById("secundario")

            principal.onclick = function (event) {
                alert("Clicou na div principal")
            }
            secundario.onclick = function (event) {
                alert("Clicou na div secundária")
            }
        }
    </script>
</head>
<body>
<form action="">
    <div id="principal" style="background-color:#00f;width:200;height:200">
        <div id="secundario" style="position:relative;background-color:#f00;left:50;top:50;width:100;height:100">
        </div>
    </div>
</form>
</body>
</html>
Ao clicar na div secundária (em vermelho), serão mostradas duas mensagens: Clicou na div principal e Clicou na div secundária. Isso ocorre porque o evento se propaga para o elemento-pai. Já se alterar o código para:
secundario.onclick = function (event) {
    alert("Clicou na div secundária")
    event.stopPropagation()
}

Apenas a mensagem Clicou na div secundária será mostrada, já que o evento não se propaga para a div principal.

Link para o comentário
Compartilhar em outros sites

  • 0

Entendi, era +- o que pensei. Então, como faço para cancelar um evento, de modo que nenhuma linha posterior do script seja executada, sempre precisar usar o throw ou return?

Ex.:

func test(evt)
{
    if(evt.which == 32)
        evt.preventDefault()
    alert('') //Se a tecla pressionada for space, esse alert não deverá ser acionado
}
Eu poderia (olha o futuro do pretérito) resolver assim...
func test(evt)
{
    if(evt.which == 32){
        evt.preventDefault()
        return
    }
    alert('') //Se a tecla pressionada for space, esse alert não será acionada
}

Mas creio que posso simplesmente cancelar tudo sem um if. Tem como?

Editado por Rafael Laurindo
Link para o comentário
Compartilhar em outros sites

  • 0

Pelo que entendi, o event.preventDefault não controla o código Javascript, e sim a reação do navegador. Por exemplo, se você chamar esse método na função onsubmit de um formulário ela continuará a ser executada até o final, mas o navegador não enviará o formulário. Sendo assim, você teria que escrever também o return para impedir que a função continue.

Exemplo:

element.onsubmit=function(event)
{
    if(!validouComSucesso())
    {
        event.preventDefault() //impede que o formulário seja enviado, mas continua a função
    }
    alert("Você clicou no botão \"enviar\", mas não sei se o formulário será enviado ou não...") //o Javascript sempre executa essa instrução, mesmo com o "preventDefault" acima
}

Link para o comentário
Compartilhar em outros sites

  • 0

Sim, entendi. Não conheço nenhum método específico para isso, mas o que geralmente faço é dar um return false ao invés do event.preventDefault. Dessa forma, a função retorna imediatamente e o fato de ter retornado false impede que o evento tenha efeito.

Só não sei se existe algum problema de compatibilidade fazendo assim (até hoje nunca tive).

Link para o comentário
Compartilhar em outros sites

  • 0

Fazendo desse jeito da certo, mas você deve colocar um return no evento (onkeypress="return func()"). Quanto a compatibilidade, só o Firefox segue os padrões rigorosamente, esse método preventDefault() é especificação da W3, eu testei o preventDefault() no opera e "necas", não funcionou. No IE, nem perdi meu tempo, pois sei que eles gostam de inventar moda (nome diferente para os comandos). Como diz o "sábio" Gil Brother do programa Hermes e Renato nesse vídeo http://www.youtube.com/watch?v=CeIG26eA2AU huahauha.

Um abração Jonathan.

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,4k
×
×
  • Criar Novo...