No trabalho de desenvolvimento do front-end, devido à compatibilidade do navegador e outros problemas, geralmente usamos "Stop Event Bubbles" e "Block Browser padrão Comportment".
1. Bloqueie o comportamento padrão do navegador
função stopDefault (e) {// Se um objeto de evento for fornecido, este é um navegador que não é do IE se (e && e.PreventDefault) {// bloqueia a ação do navegador padrão (w3c) e.PreventDefault (); } else {// Como bloquear a ação padrão da função no ie window.event.returnValue = false; } retornar false; }2. Pare com a borbulha dos eventos
Função Stopbubble (e) {// Se um objeto de evento for fornecido, este é um navegador que não é de IE se (e && e.stopPropagation) {//, portanto, ele suporta o método stopPropagation () do W3C.StopPropagation (); } else {// Caso contrário, precisamos usar o IE para cancelar o evento Bubbles de eventos window.event.cancelbubble = true; } retornar false; }Exemplo de aplicação específica: um projeto escrito foi entregue ao usuário para uso hoje, e muitas perguntas foram devolvidas, uma das quais foi muito clássica:
Há um formulário em uma página. O botão usado para enviar o formulário é um botão. Use jQuery para responder ao clique deste botão. Envie -o através da postagem. O usuário insere uma caixa de texto. Depois que o usuário insere a coisa a preencher, pressione a tecla Enter diretamente, o que equivale a pressionar o botão. No começo, não prestei atenção a esse problema. Depois de pressionar Enter, pulei para outra página. Depois de verificar muitas informações, descobri que queria bloquear o comportamento padrão do navegador, porque o comportamento padrão do envio é enviar o formulário e, em seguida, seu JS não será executado. Então, primeiro cancele o comportamento padrão. Em seguida, execute seu JQ para enviar. Não consigo explicar os detalhes específicos. Só sei que se o tipo = "Enviar" na caixa de texto for clicado diretamente no botão, ele irá para outra página. Se type = "Button", isso não acontecerá ao clicar no botão. Você pode pressionar Enter para pular para outra página. A solução é:
<input type = "text" name = "AppGrpName_s" id = "AppGrpName_s" onKeydown = "Enter_down (this.form, evento);"/>
<script type = "text/javascript"> function Enter_down (form, event) {if (event.keycode == "13") {stopDefault (event); submitform (formulário, 'ActionDiv'); }} função stopDefault (e) {// Se um objeto de evento for fornecido, este é um navegador que não é do IE se (e && e.PreventDefault) {// bloqueia a ação do navegador padrão (w3c) e.preventDefault (); } else {// Como bloquear a ação padrão da função no ie window.event.returnValue = false; } retornar false; } </script>Através do código acima, você pode perceber que, ao pressionar Enter, é equivalente a clicar no botão "Enviar". E o código acima é compatível com os navegadores IE e FF.
Às vezes, quando você encontra alguns comportamentos de atalho que precisam bloquear o navegador, como: pressionar a tecla Backspace sob FF, pulará para a página de história do navegador anterior;
Observe que você precisa chamar a função StopDefault (Evento) no evento OnKekyDown, e a chamada no evento OnKeyUp não tem sucesso.
<span style = "cor: rgb (51, 153, 51);"> </</span> anclick <span style = "cor: rgb (51, 153, 51);"> = </span> <span style = "cor: rgb (51, 153, 51); 51); ">>> </span> a <span style =" cor: rgb (51, 153, 51); ">> </</span> a <span style =" cor: rgb (51, 153, 51); ">> </span>
Como o HREF é um valor nulo, se o comportamento padrão do navegador não estiver bloqueado, o efeito será atualizar a página.
Agora, tudo o que precisamos fazer é bloquear o evento Link do HREF e executar o evento OnClick.
Velha maneira de manusear:
<span style = "cor: rgb (51, 153, 51);"> <</span> anclick <span style = "cor: rgb (51, 153, 51);"> = </span> <span style = "cor: rgb (51, 102, 204);" "" "" href <span style = "cor: rgb (51, 153, 51);"> = </span> <span style = "cor: rgb (51, 153, 51);"> = </span> <span style = "cor: rgb (51, 102, 204);"> "" " href<span style="color: rgb(51, 153, 51);">=</span><span style="color: rgb(51, 102, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 204); RGB (51, 153, 51); ">> </span>
Como escrever jQuery:
1) Retorne falso: no manipulador de eventos, evita o comportamento padrão e a bolha de eventos.
Retorne falso no processamento de eventos, eventos padrão e eventos borbulhantes podem ser bloqueados.
2) Event.PreventDefault (): no manipulador de eventos, evite o evento padrão (permite o bubblering).
event.preventDefault () pode impedir o evento padrão, mas permitir a ocorrência de eventos de bolha.
3) Event.StopPropagation (): no manipulador de eventos, evite a bolha (permite o comportamento padrão).
Event.StopPropagation () pode impedir a borbulha, mas permitir a ocorrência de eventos padrão.
Como escrever protótipo:
Event.stop (evento)
Uso Introdução:
Depois que um evento ocorre, o navegador geralmente desencadeia o manipulador de eventos no elemento de ocorrência de eventos, depois seu elemento pai, o elemento pai do elemento pai ... e assim por diante até o elemento raiz do documento. Isso é chamado de bolhas de eventos e é a maneira mais comum que os eventos se espalham. Depois que um evento é processado, convém interromper a propagação do evento e não deseja que ele continue a borbulhar.
Quando seu programa tiver a oportunidade de processar um evento, se o evento tiver comportamento padrão, o navegador também o processará. Por exemplo, clique no link de navegação, envie o formulário para o servidor, pressione Enter em uma caixa de texto de linha única e assim por diante. Se você definir sua própria maneira de lidar com esses eventos, poderá estar muito disposto a bloquear o comportamento padrão relevante.
No entanto, às vezes o problema correspondente não pode ser resolvido. Embora o método para bloquear o comportamento padrão do navegador tenha sido chamado, o comportamento padrão ainda será chamado ao pressionar Enter. No final, o problema não foi encontrado, então tive que desativar a tecla Enter. De fato, a tecla Tab é usada em vez da tecla Enter. O código é o seguinte:
<Script Language = "Javascript" Event = "OnKeyDown" para = "Document"> // Se for a tecla Enter if (event.keycode == 13) {// altere -o para a tecla TAB, para que toda vez que você pressione Enter, o efeito da guia, o cursor pula para o próximo evento do objeto.KeyCode = 9; } </script> <script idioma = "javascript" type = "text/javascript"> // Desative o formulário de chave para enviar automaticamente document.onkeydown = function (event) {var destino, código, tag; if (! Event) {event = window.event; // para o IE Browser Target = event.srcelement; código = event.KeyCode; if (code == 13) {tag = Target.TagName; if (tag == "textarea") {return true; } else {return false; }}} else {Target = event.target; // para navegadores que seguem o padrão W3C, como o código do Firefox = event.keycode; if (code == 13) {tag = Target.TagName; if (tag == "input") {return false; } else {return true; }}}}}; </script>Exemplos de uso específicos:
<! Doctype html public "-// w3c // dtd html 4.01 transitório // pt"> <%@ página linguagem = "java" import = "java.util.*" PageEncoding = "utf-8"%> <%@ file = "/Pages//Common.jsps.%> http-equiv = "PRAGMA" content = "no-cache"> <meta http-equiv = "cache-controle" content = "no-cache"> <meta http-equiv = "expires" content = "0"> <meta http-equiv = "tyt-tyte"/"text/text/" GOTOPAGE (CurrentPage, form) {goto_page (currentpage, formulário, "actionDiv"); } função addappGrp () {$ ("#actionDiv"). carregar ("$ {contextpath} /pages/manage/business/add.jsp"); $ ("#chance_search_div"). hide (); } função modifyAppGrp (idname) {var id = codeuricomponent (idname); var url = contextName + "/ppgrPaction.do?method=addappgrp&appgrPname="+id; recuperar (url, 'actionDiv'); $ ("#chance_search_div"). hide (); } função saveBusiness (thisform) {var name = $ ("#appgrpName"). val (); if (name.trim () == "") {alert ("o nome do grupo não pode estar vazio."); retornar; } submTform (thisform, null, pós -pau); retornar ; } função postersave (content) {if (content! = null && content! = "") {var arr = content.split (","); if (arr [0] == "true") {$ ("#acaso_search_div"). show (); // nó atual var itemid = "0 ::" + $ ("#appgrpName"). Val (); // Presid Node, porque esse método é executado apenas ao adicionar o grupo de aplicação raiz, o nó pai é uniformemente -1 var parentid = -1; // Nó atual Nome de exibição var itemText = $ ("#AppGrpName"). Val (); // Adicione novo node Tree.insertNewChild (ParentID, ItemId, ItemText, DoonClick, 'MyFolderClosed.gif', 'MyFoldeRopen.gif', 'MyFolderClosed.gif'); retieurl ("$ {contextpath} /appgrPaction.do?method=appGrPlist", "ActionDiv"); retornar; } alerta (arr [1]); retornar; } alert ("salvar falhas"); retornar; } função deletebusiness (thisform, idname) {if (confirm ("você deseja excluir?")) {var id = codeuricomponent (idname); recupereurl ("$ {contextpath} /ppgrPaction.do?method=deleteAppGrp&appgrPname=" + id, nulo, nulo, function (content) {if (content! = null && content! = "") {var = content.split (") Este grupo de aplicativos. = " retornar ; }} function depois forforcel () {if (content! = null && content! = "") {var = content.split (","); if (arr [0] == "true") {MonitorTree (); retieurl ("$ {contextpath} /appgrPaction.do?method=appGrPlist", "ActionDiv"); retornar; } alerta (arr [1]); retornar; } alert ("salvar falhas"); retornar; } function Enter_down (form, event) {if (event.keycode == "13") {stopDefault (event); submitform (formulário, 'ActionDiv'); }} função stopDefault (e) {// Se um objeto de evento for fornecido, este é um navegador que não é de sua vez se (e && e.preventDefault) {// bloqueia a ação do navegador padrão (w3c) e.PreventDefault (); } else {// Como bloquear a ação padrão da função no ie window.event.returnValue = false; } retornar false; } </script> </ad Head> <body> <table> <tr> <td style = "text-align: left;"> <div id = "achance_search_div"> <html: formulário action = "appGrpaction.do?method=appgrPlist"> <table> <tr> <the> query <sput dype = "thidning" hidnod "hidnod" hidnod "[tabela> <tr> <h> weary) </tr> <tr> <td style = "text-align: esquerda; preenchimento-left: 50px;"> <r /> name <input type = "text" name = "AppGrpName_s" id = "AppGrpName_s" onblur = "javasscript: issPecialchar (this);" onKeyDown = "ENTER_DOWN (this.form, evento);"/> <input type = "button" value = "query" onclick = "javascript: submitform (this.form, 'actionDiv');" /> <input type = "button" value = "add" onclick = "javascript: addappGrp ();"/> <br/> </td> </tr> </tabela> </tml: form> </div> <div id = "actionDiv"> </div> </td> </) </tabela <script> <cript> } /appgrPaction.do?method=appGrPlist&random= " + math.random ()); -> </script> </body> </html>O código acima para impedir o comportamento padrão do navegador e o comportamento borbulhante do JS é todo o conteúdo que compartilho com você. Espero que possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.