Pergunta

Estou me perguntando se existe um padrão definido para qual é a ação padrão de vários elementos HTML.Eu olhei para o Especificação HTML do W3C e embora sejam muito precisos sobre quais atributos podem ser usados ​​com os elementos (e também algumas coisas comportamentais, como exatamente o que é incluído no envio do formulário), não há nada sobre o comportamento dos elementos.Eu também verifiquei o Referência Mozilla JS, e não encontrei nada lá também.

Em particular, estou procurando o comportamento padrão de um botão de envio de formulário;Já vi em diferentes lugares que sua ação padrão é enviar o formulário e, alternativamente, que sua ação padrão não é enviar o formulário, mas sim obter foco.Assim, parece não haver consenso sobre se onclick="return false;" para um botão de envio interromperá o envio do formulário ou não.

(Edite para maior clareza - não estou tentando fazer nenhuma validação em nível de formulário no envio onclick ou qualquer coisa assim;se eu fosse, estaria usando o formulário onsubmit em vez de.Estou realmente interessado em capturar cliques no botão e, potencialmente, não fazer com que ele envie o formulário neste caso.Isso pode acabar exigindo o botão onclick definir algum estado em que o formulário onsubmit inspeciona, mas se eu puder return false então isso é ótimo.Mesmo que não, seria crítico qual seria a ordem onsubmit e onclick manipuladores são demitidos (ou seja,o botão despacha o envio antes de executar seu manipulador de cliques?) que novamente não vi especificado em nenhum lugar.)

Embora fosse simplesmente codificar um teste, prefiro confiar nas especificações/comportamento documentado em vez dos resultados de um teste trivial que, sem dúvida, perderia quaisquer sutilezas, caso existissem.Em particular, fiz um teste rápido na semana passada que pareceu mostrar isso não interromper o envio do formulário, mas executar um hoje mostra que faz.Não tive sorte em encontrar qualquer tipo de recurso confiável sobre quais navegadores realmente faço quando você interage com seus elementos (por exemplo,qual é a ação padrão, se o manipulador onclick de um botão de envio é acionado antes ou depois do envio do formulário, etc.)

Qualquer conselho sobre onde procurar neste caso seria bem-vindo.

Foi útil?

Solução

Os documentos relevantes são Eventos DOM3 e a Especificação HTML 5.

Eles podem não ter todas as informações de que você precisa, mas deveriam.Então, se você achar que eles estão faltando, por favor solicitar que esses comportamentos sejam especificados.

Outras dicas

Um motivo pelo qual você pode ter dificuldade em encontrar uma especificação para isso é que você está observando mais de um comportamento.

Contexto onclick="return false;" impedirá que o botão enviar envie o formulário, mas não impedirá que o formulário seja enviado.Se você pressionar Enter quando um campo do formulário estiver em foco, o próprio formulário poderá ser enviado sem envolver o botão enviar.(Não sei os detalhes exatos e eles podem variar um pouco de um navegador para outro, mas você entende o princípio.)

para esse cenário específico, você pode querer experimentar diferentes propriedades de evento, já que os navegadores agem de maneira diferente, o onlick é para o botão, o onsubmit é um evento de formulário, então, naturalmente, se você retornar false para o onclick, isso não significa que o on submit não terá efeito, você deve lidar com o onsubmit separadamente ou delegar o envio ao botão de envio (retornando false onsubmit e deixar o manipulador onclick ter form.submit), também tentar com vários botões de envio para entender como funciona

Eu sei que você já deve saber disso, mas algumas outras dicas que peguei ao lidar com formulários, experimente event.cancelBubble = true e event.returnValue = false (específico do IE, não tenho certeza sobre o firefox), às vezes retornar falso não é bom suficiente...

quanto à documentação, a biblioteca MSDN documenta a ação padrão para todos os eventos, aqui está a documentação para o envio:http://msdn.microsoft.com/en-us/library/ms535249(VS.85).aspx#

Interessantemente:O método de envio não invoca o manipulador de eventos Onsubmit.

o que é ótimo, caso contrário, teria entrado em um loop infinito!

e aqui está a documentação do onlcickhttp://msdn.microsoft.com/en-us/library/ms536913(VS.85).aspx

A biblioteca MSDN também documenta todos os eventos e objetos, mas por um preço, todos específicos do IE!

Sim, você pode configurar um botão - com um ouvinte, onde quando o botão é clicado, você pode interromper o envio do formulário.O envio do formulário é o comportamento padrão para um 'botão' de tipo enviar (importante) em um formulário.

O método de evento, preventDefault (ou returnValue=false para o evento de janela, dependendo do modelo de evento que o navegador segue), impedirá esse comportamento de envio padrão.Eu também stopPropagation (MSIE evt.modelo = cancelarBubble).

Por exemplo, para o seguinte botão do tipo 'enviar':

<button type="submit" id="logout" name="logout" value="Log Out">Log Out</button>

Adicione um ouvinte de evento x-browser para esse botão específico.Por exemplo, supondo que testlogout seja o nome da sua função que controla o que acontece quando o botão é clicado, algo como o seguinte pode ser usado para configurar o ouvinte:

var logoutBtn = (document.getElementById && document.getElementById('logout')) || 
   (document.all && document.all['logout']) || document.forms[formname].elements['logout'] || null;
if (logoutBtn) {
   if (logoutBtn.addEventListener) {
       logoutBtn.addEventListener('click',testlogout,false);
   } else if (window.attachEvent) {
       logoutBtn.attachEvent('onclick',testlogout);
   } else {
       //legacy:
       logoutBtn.onclick = testlogout;
       //...logic for document.layers support, etc.
   }
}

Então, na função testlogout, que passará automaticamente no evento, você testaria quaisquer condições.De acordo com as condições definidas, use event.preventDefault ou returnValue, dependendo novamente de qual navegador suporta.Estes tomam o lugar do inline 'retorna falso'.Por exemplo:

function testlogout(e) 
{
    e = e || window.event;
    //... your logic here...
    e.stopPropagation?e. stopPropagation():(e.cancelBubble?e.cancelBubble():"");
    e.preventDefault?e.preventDefault():e.returnValue=false;
    return false; // in case all else fails?
}

O evento passado tem seu próprio conjunto de propriedades, cujos nomes variam, novamente, dependendo do modelo que o navegador segue.Essas propriedades identificarão o botão alvo clicado, por exemplo.

Os modelos atuais de escuta de eventos fazem não prestar atenção em 'retorna falso'.A 'retorna falso'O comando cairá em ouvidos surdos, por assim dizer.Mas não se preocupe, contanto que você use o que eles entendem.

Espero que isso ajude a resolver o problema subjacente atual.Ler eventos DOM e modelos de eventos esclarecerá os métodos e propriedades disponíveis.

por que usar um botão Enviar?por que não usar apenas um botão? <input type="button" onclick="function(){if(allCriteriaIsMet()) this.form.submit()}" value="click me"/>

Ou eu estou esquecendo de alguma coisa?

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top