Rafael Laurindo Postado Julho 31, 2010 Denunciar Share Postado Julho 31, 2010 (editado) Pessoal, para que serve exatamente o método event.stopPropagation() diferentemente do método event.preventDefault()? Eu li na documentação do mozilla, mas não entendi quase nada. Editado Agosto 2, 2010 por Rafael Laurindo Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 Jonathan Queiroz Postado Julho 31, 2010 Denunciar Share Postado Julho 31, 2010 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. Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 Rafael Laurindo Postado Agosto 1, 2010 Autor Denunciar Share Postado Agosto 1, 2010 (editado) 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 Agosto 1, 2010 por Rafael Laurindo Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 Jonathan Queiroz Postado Agosto 1, 2010 Denunciar Share Postado Agosto 1, 2010 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 } Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 Rafael Laurindo Postado Agosto 1, 2010 Autor Denunciar Share Postado Agosto 1, 2010 Exatamente, por esse motivo gostaria de saber se existe um método que faça isso que pensei. Ou seja, usar o primeiro código, ao invés do segundo, com um método que substitua o preventDefault(). Entende? Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 Jonathan Queiroz Postado Agosto 1, 2010 Denunciar Share Postado Agosto 1, 2010 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). Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 Rafael Laurindo Postado Agosto 1, 2010 Autor Denunciar Share Postado Agosto 1, 2010 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. Citar Link para o comentário Compartilhar em outros sites More sharing options...
Pergunta
Rafael Laurindo
Pessoal, para que serve exatamente o método event.stopPropagation() diferentemente do método event.preventDefault()? Eu li na documentação do mozilla, mas não entendi quase nada.
Editado por Rafael LaurindoLink para o comentário
Compartilhar em outros sites
6 respostass a esta questão
Posts Recomendados
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.