In front-end development work, due to browser compatibility and other issues, we often use "stop event bubbles" and "block browser default behavior".
1. Block the default behavior of the browser
function stopDefault(e) { //If an event object is provided, this is a non-IE browser if(e && e.preventDefault) { //Block default browser action (W3C) e.preventDefault(); } else { //How to block the default action of the function in IE window.event.returnValue = false; } return false; }2. Stop the bubbling of events
function stopBubble(e) { //If an event object is provided, this is a non-IE browser if(e && e.stopPropagation) { //So it supports W3C's stopPropagation() method e.stopPropagation(); } else { // Otherwise, we need to use IE to cancel event bubbles window.event.cancelBubble = true; } return false; }Specific application example: A project written was handed over to the user for use today, and a lot of questions were returned, one of which was very classic:
There is a form on a page. The button used to submit the form is a button. Use jquery to respond to the clicking of this button. Submit it through post. The user inputs a text box. After the user enters the thing to fill out, press the Enter key directly, which is equivalent to pressing the button. At the beginning, I didn't pay attention to this problem. Once I press Enter, I jumped to another page. After checking a lot of information, I found that I wanted to block the browser's default behavior, because the default behavior of SUBMIT is to submit the form, and then your JS will not be executed. So first cancel the default behavior. Then execute your JQ to submit. I can't explain the specific details. I only know that if the type="submit" in the text box is directly clicked on the button, it will jump to another page. If type="button", this will not happen when clicking the button. You can press Enter to jump to another page. The solution is:
<input type="text" name="appGrpName_s" id="appGrpName_s" onkeydown="enter_down(this.form, event);"/>
<script type="text/javascript"> function enter_down(form, event) { if(event.keyCode== "13") { stopDefault(event); submitForm(form,'actionDiv'); } } function stopDefault(e) { //If an event object is provided, this is a non-IE browser if(e && e.preventDefault) { //Block the default browser action (W3C) e.preventDefault(); } else { //How to block the default action of the function in IE window.event.returnValue = false; } return false; } </script>Through the above code, you can realize that when pressing Enter, it is equivalent to clicking the "Submit" button. And the above code is compatible with IE and FF browsers.
Sometimes when you encounter some shortcut key behaviors that need to block the browser, such as: pressing the Backspace key under ff will jump to the history page of the previous browser;
Note that you need to call the stopDefault(event) function in the onkeydown event, and the call in the onkeyup event is unsuccessful.
<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, 51);">>></span>a<span style="color: rgb(51, 153, 51);">></</span>a<span style="color: rgb(51, 153, 51);">></span>
Since href is a null value, if the browser's default behavior is not blocked, the effect will be to refresh the page.
Now all we need to do is to block the link event of href and execute the onclick event.
Old way of handling:
<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);">"toggleFriendFuncList(event, '6708062', 'he');"</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>
How to write jquery:
1) return false : In event handler , prevents default behavior and event bubble .
return false In the processing of events, default events and bubbling events can be blocked.
2) event.preventDefault(): In event handler ,prevent default event (allows bubblering) .
event.preventDefault() can prevent the default event but allow the occurrence of bubble events.
3) event.stopPropagation(): In event handler, prevent bubble (allows default behavior).
event.stopPropagation() can prevent bubbling but allow the occurrence of default events.
How to write prototype:
Event.stop(event)
Usage introduction:
After an event occurs, the browser usually first triggers the event handler on the event occurrence element, then its parent element, the parent element of the parent element... and so on until the root element of the document. This is called event bubbles and is the most common way events spread. After an event is processed, you may want to stop the spread of the event and do not want it to continue to bubble.
When your program has the opportunity to process an event, if the event has default behavior, the browser will also process it. For example, click on the navigation link, submit the form to the server, press Enter in a single line text box, and so on. If you define your own way of handling these events, you may be very willing to block the relevant default behavior.
However, sometimes the corresponding problem cannot be solved. Although the method to block the browser's default behavior has been called, the default behavior will still be called when pressing Enter. In the end, the problem was not found, so I had to disable the Enter key. In fact, the Tab key is used instead of the Enter key. The code is as follows:
<script language="javascript" event="onkeydown" for="document"> //If it is the Enter key if ( event.keyCode == 13 ) { //Change it to the Tab key, so that every time you press Enter, the effect of Tab, the cursor jumps to the next object event.keyCode = 9; } </script> <script language="javascript" type="text/javascript"> //Disable the Enter key form to automatically submit document.onkeydown = function(event) { var target, code, tag; if (!event) { event = window.event; //For ie browser target = event.srcElement; code = event.keyCode; if (code == 13) { tag = target.tagName; if (tag == "TEXTAREA") { return true; } else { return false; } } } else { target = event.target; //For browsers that follow the w3c standard, such as Firefox code = event.keyCode; if (code == 13) { tag = target.tagName; if (tag == "INPUT") { return false; } else { return true; } } } } }; </script>Specific usage examples:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ include file="/pages/common/global.jsp"%> <html> <head> <title>Wulin.com</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <script> function 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=encodeURIComponent(idName); var url = contextName + "/appGrpAction.do?method=addAppGrp&appGrpName="+id; retrieveURL(url,'actionDiv'); $("#chance_search_div").hide(); } function savebusiness(thisForm){ var name = $("#appGrpName").val(); if(name.trim()==""){ alert("The group name cannot be empty."); return; } submitForm(thisForm,null,afterSave); return ; } function afterSave(content){ if(content!=null&&content!=""){ var arr = content.split(","); if(arr[0]=="true"){ $("#chance_search_div").show(); //Current node var itemId = "0::" + $("#appGrpName").val(); //Presid node, because this method is only executed when adding the root application group, the parent node is uniformly -1 var parentId = -1; //Current node display name var itemText = $("#appGrpName").val(); //Add new node tree.insertNewChild(parentId, itemId, itemText, doOnClick, 'myfolderClosed.gif' ,'myfolderOpen.gif','myfolderClosed.gif'); retrieveURL("${contextPath}/appGrpAction.do?method=appGrpList","actionDiv"); return; } alert(arr[1]); return; } alert("Save failed"); return; } function deleteBusiness(thisForm,idName){ if(confirm("Do you want to delete?")){ var id=encodeURIComponent(idName); retrieveURL("${contextPath}/appGrpAction.do?method=deleteAppGrp&appGrpName=" + id,null,null,function(content){ if(content!=null&&content!=""){ var arr = content.split(","); if(arr.length==3&&arr[2]=='y'){ var msg = "There is an application under this application group. Do you need to force delete it?"; if(confirm(msg)){ retrieveURL("${contextPath}/appGrpAction.do?method=forceDelAppGrp&appGrpName="+id,null,null,afterForceDel); } return; } if(arr.length==2){ if(arr[0]=="true"){ //Current node itemId = "0::" + idName; tree.deleteItem(itemId); retrieveURL("${contextPath}/appGrpAction.do?method=appGrpList","actionDiv"); return; } alert(arr[1]); } return; } alert("Delete failed"); return; }); return ; } } function afterForceDel(){ if(content!=null&&content!=""){ var arr = content.split(","); if(arr[0]=="true"){ monitorTree(); retrieveURL("${contextPath}/appGrpAction.do?method=appGrpList","actionDiv"); return; } alert(arr[1]); return; } alert("Save failed"); return; } function enter_down(form, event) { if(event.keyCode== "13") { stopDefault(event); submitForm(form,'actionDiv'); } } function stopDefault(e) { //If an event object is provided, then this is a non-IE browser if(e && e.preventDefault) { //Block the default browser action (W3C) e.preventDefault(); } else { //How to block the default action of the function in IE window.event.returnValue = false; } return false; } </script> </head> <body> <table> <tr> <td style="text-align:left;"> <div id="chance_search_div"> <html:form action="appGrpAction.do?method=appGrpList"> <table> <tr> <th> Query<input type="hidden" name="hidden_s" value="1" /> </th> </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> <script><!-- $("#actionDiv").load("${contextPath }/appGrpAction.do?method=appGrpList&random=" + Math.random()); --></script> </body> </html>The above code for preventing default browser behavior and bubbling behavior of js is all the content I share with you. I hope it can give you a reference and I hope you can support Wulin.com more.