Código de implementación de JS para bloquear el comportamiento predeterminado del navegador y el comportamiento de la burbuja

En el trabajo de desarrollo delantero, debido a la compatibilidad del navegador y otros problemas, a menudo usamos "parar burbujas de eventos" y "comportamiento predeterminado del navegador de bloque".

1. Bloquear el comportamiento predeterminado del navegador

 Función stopDefault (e) {// Si se proporciona un objeto de evento, este es un navegador no II if (e && e.preventDefault) {// bloquean la acción del navegador predeterminada (w3c) e.preventDefault (); } else {// Cómo bloquear la acción predeterminada de la función en IE Window.event.returnValue = false; } return false; }

2. Detente el burbujeo de los eventos

 Función stopbubble (e) {// Si se proporciona un objeto de evento, este es un navegador no II if (e && e.stoppropagation) {//, por lo que admite el método stopPropagation () de W3C e.stoppropagation (); } else {// de lo contrario, debemos usar IE para cancelar burbujas de eventos Window.event.cancelBubble = true; } return false; }

Ejemplo de aplicación específica: un proyecto escrito fue entregado al usuario para su uso hoy, y se devolvieron muchas preguntas, una de las cuales fue muy clásica:

Hay un formulario en una página. El botón utilizado para enviar el formulario es un botón. Use jQuery para responder al clic de este botón. Envíelo a través de la publicación. El usuario ingresa un cuadro de texto. Después de que el usuario ingrese a la cosa que debe completar, presione la tecla ENTER directamente, que es equivalente a presionar el botón. Al principio, no presté atención a este problema. Una vez que presiono Enter, salté a otra página. Después de verificar mucha información, descubrí que quería bloquear el comportamiento predeterminado del navegador, porque el comportamiento predeterminado de enviar es enviar el formulario, y luego su JS no será ejecutado. Entonces, primero cancele el comportamiento predeterminado. Luego ejecute su JQ para enviar. No puedo explicar los detalles específicos. Solo sé que si el tipo = "enviar" en el cuadro de texto se hace clic directamente en el botón, saltará a otra página. If type = "botón", esto no sucederá al hacer clic en el botón. Puede presionar ENTER para saltar a otra página. La solución es:

<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 (evento); SubmitForm (formulario, 'ActionDiv'); }} function stopDefault (e) {// Si se proporciona un objeto de evento, este es un navegador no II if (e && e.preventDefault) {// bloquea la acción de navegador predeterminada (w3c) e.preventDefault (); } else {// Cómo bloquear la acción predeterminada de la función en IE Window.event.returnValue = false; } return false; } </script>

A través del código anterior, puede darse cuenta de que al presionar ENTER, es equivalente a hacer clic en el botón "Enviar". Y el código anterior es compatible con los navegadores IE y FF.

A veces, cuando te encuentras con algunos comportamientos de la tecla de acceso directo que necesitan bloquear el navegador, como: presionar la tecla Backspace en FF saltará a la página de Historia del navegador anterior;

Tenga en cuenta que debe llamar a la función StopDefault (Event) en el evento OnKeydown, y la llamada en el evento OnKeyUp no tiene éxito.

 <span style = "color: rgb (51, 153, 51);"> </ </ </span> a onclick <span style = "color: rgb (51, 153, 51);"> = </span> <span style = "color: rgb (51, 153, 51);" >>> </span> a <span style = "color: rgb (51, 153, 153, 153, 51); ">>> </span> a <span style =" color: rgb (51, 153, 51); ">> </ </span> a <span style =" color: rgb (51, 153, 51); ">> </span>

Dado que HREF es un valor nulo, si el comportamiento predeterminado del navegador no está bloqueado, el efecto será actualizar la página.

Ahora todo lo que necesitamos hacer es bloquear el evento de enlace de HREF y ejecutar el evento OnClick.

Antigua forma de manejo:

 <span style = "color: rgb (51, 153, 51);"> <</span> a onClick <span style = "color: rgb (51, 153, 51);"> = </span> <span style = "color: rgb (51, 102, 204);"> "Togglefunclist (event ',' 6708062 ',' Span ';"); ") href<span style="color: rgb(51, 153, 51);">=</span><span style="color: rgb(51, 153, 51);">=</span><span style="color: rgb(51, 102, 204);">">"toggleFriendFuncList(event, '6708062', 'he');"</span> 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);">"javascript:void(0);"</span><span style="color: rgb(51, 153, 51);">></</span>a<span style="color: RGB (51, 153, 51); ">> </span>

Cómo escribir jQuery:

1) Return False: en el controlador de eventos, evita el comportamiento predeterminado y la burbuja de eventos.

Devolver falso en el procesamiento de eventos, eventos predeterminados y eventos burbujeantes se pueden bloquear.

2) Event.PreventDefault (): en el controlador de eventos, prevenir el evento predeterminado (permite burbujear).

Event.PreventDefault () puede evitar el evento predeterminado pero permitir la ocurrencia de eventos de burbujas.

3) Event.stopPropagation (): en el controlador de eventos, prevenir la burbuja (permite el comportamiento predeterminado).

Event.stopPropagation () puede evitar burbujas pero permitir la ocurrencia de eventos predeterminados.

Cómo escribir prototipo:

Event.stop (evento)

Introducción de uso:

Después de que ocurre un evento, el navegador generalmente desencadena primero el controlador de eventos en el elemento de ocurrencia del evento, luego su elemento principal, el elemento principal del elemento principal ... y así sucesivamente hasta el elemento raíz del documento. Esto se llama burbujas de eventos y es la forma más común que se extienden los eventos. Después de procesar un evento, es posible que desee detener la propagación del evento y no quiera que continúe burbujeando.

Cuando su programa tiene la oportunidad de procesar un evento, si el evento tiene un comportamiento predeterminado, el navegador también lo procesará. Por ejemplo, haga clic en el enlace de navegación, envíe el formulario al servidor, presione Entrar en un cuadro de texto de una sola línea, y así sucesivamente. Si define su propia forma de manejar estos eventos, puede estar muy dispuesto a bloquear el comportamiento predeterminado relevante.

Sin embargo, a veces el problema correspondiente no se puede resolver. Aunque se ha llamado al método para bloquear el comportamiento predeterminado del navegador, aún se llamará al comportamiento predeterminado al presionar ENTER. Al final, no se encontró el problema, por lo que tuve que deshabilitar la clave ENTER. De hecho, la tecla TAB se usa en lugar de la tecla ENTER. El código es el siguiente:

 <script language = "javascript" event = "onkeydown" for = "document"> // Si es la tecla ENTRAR if (event.keycode == 13) {// Cambiarlo a la tecla Tab, de modo que cada vez que presiona ENTER, el efecto de Tab, el cursor salta al siguiente objeto Event.KeyCode = 9; } </script> <script language = "javaScript" type = "text/javascript"> // deshabilitar el formulario Ingresar clave para enviar automáticamente document.onkeydown = function (event) {var target, code, tag; if (! event) {event = window.event; // para IE Browser Target = Event.SrCelement; código = event.keycode; if (código == 13) {tag = target.tagname; if (tag == "textArea") {return true; } else {return false; }}} else {target = event.target; // para navegadores que siguen el estándar W3C, como el código Firefox = event.keycode; if (código == 13) {tag = target.tagname; if (tag == "input") {return false; } else {return true; }}}}}; </script>

Ejemplos de uso específicos:

 < http-eEquiv = "Pragma" Content = "No-Cache"> <meta http-Equiv = "Cache-Control" Content = "No-Cache"> <meta http-equiv = gotopage (currentPage, form) {goto_page (currentPage, form, "ActionDiv"); } function addAppGrp () {$ ("#ActionDiv"). Load ("$ {contextPath} /pages/manage/business/add.jsp"); $ ("#Chance_Search_Div"). Hide (); } function ModifyAppGrp (idname) {var id = EncodeRiComponent (idname); var url = contextname + "/appgrpaction.do?method=addappgrp&appgrpname="+id; RemieveUrl (URL, 'ActionDiv'); $ ("#Chance_Search_Div"). Hide (); } function saveBusiness (thisForm) {var name = $ ("#appGrpname"). val (); if (name.trim () == "") {alert ("El nombre del grupo no puede estar vacío"); devolver; } SubmitForm (thisForm, null, posterior); devolver ; } function AfterSave (content) {if (content! = null && content! = "") {var arr = content.split (","); if (arr [0] == "True") {$ ("#Chance_Search_Div"). Show (); // nodo actual var itemid = "0 ::" + $ ("#appGrpname"). Val (); // nodo Presid, debido a que este método solo se ejecuta al agregar el grupo de aplicaciones raíz, el nodo principal es uniformemente -1 var parentid = -1; // Nombre de nodo actual Nombre var itemText = $ ("#appGrpname"). Val (); // Agregar nuevo árbol de nodo.insertNewChild (ParentId, itemId, itemText, doonClick, 'myfolderclosed.gif', 'myFolderPen.gif', 'myFolderclosed.gif'); RemieveUrl ("$ {contextpath} /appgrpaction.do?method=appgrplist", "ActionDiv"); devolver; } alerta (arr [1]); devolver; } alert ("Guardar fallido"); devolver; } function DeleteBusiness (thisForm, IdName) {if (confirmar ("¿Quieres eliminar?")) {var id = EncodeUriceMponent (idname); RetrieveUrl ("$ {contextPath} /appgrpaction.do?method=deleteAppGrp&appGrpname=" + id, null, null, function (content) {if (content! = null && content! = "") {var arr = content.ssplit (","); if (arr.length == 3 && »» »») Aplicación bajo este grupo de aplicaciones. Node itemid = "0 ::" + IDNAME; devolver ; }} función AfterForCedel () {if (content! = null && content! = "") {var arr = content.split (","); if (arr [0] == "true") {monitorTree (); RemieveUrl ("$ {contextpath} /appgrpaction.do?method=appgrplist", "ActionDiv"); devolver; } alerta (arr [1]); devolver; } alert ("Guardar fallido"); devolver; } function enter_down (form, evento) {if (event.keycode == "13") {stopDefault (evento); SubmitForm (formulario, 'ActionDiv'); }} function stopDefault (e) {// Si se proporciona un objeto de evento, entonces este es un navegador no II if (e && e.preventDefault) {// bloquea la acción de navegador predeterminada (w3c) e.preventDefault (); } else {// Cómo bloquear la acción predeterminada de la función en IE Window.event.returnValue = false; } return false; } </script> </head> <body> <table> <tr> <td style = "text-align: left;"> <div id = "Chance_search_div"> <html: form de acción = "appgrpaction.do?method=appplist"> <tr> <tr> <th> Query <input type = "hidden" name = "hidden_s" valle "1"/"1"/th> th/th> th/th/th> th/th> <be. </tr> <tr> <td style = "text-align: left; padding-left: 50px;"> <Br /> name <input type = "text" name = "appgrpname_s" id = "appgrpname_s" onblur = "javaScript: isspecialchar (this);"; ";"; " onKeydown = "enter_down (this.form, event);"/> <input type = "Button" value = "Query" onClick = "JavaScript: SubmitForm (this.Form, 'ActionDiv');" /> <input type = "button" value = "add" onClick = "javaScript: addAppGrp ();"/> <Br/> </td> </tr> </table> </tml: form> </div> <div id = "ActionDiv"> </div> </td> </tr> </table> <escript> <!- $ ("#ActionDiv"). } /appgrpaction.do?method=appgrplist&random= " + math.random ()); -> </script> </body> </html>

El código anterior para prevenir el comportamiento predeterminado del navegador y el comportamiento burbujeante de JS es todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.