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 event object is provided, then this is a non-IE browserif(e && ) {
//Block default browser action (W3C)();
} else {
//How to prevent the default action of the function in IE = false;
}
return false;
}
2. Stop the bubbling of events
function stopBubble(e) {
//If event object is provided, then this is a non-IE browserif(e && ) {
// Therefore it supports W3C's stopPropagation() method();
} else {
// Otherwise, we need to use IE to cancel the event bubble = 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 action 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 execute it. 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" onkeydown="enter_down(, event);"/>
<script type="text/javascript">
function enter_down(form, event) {
if(== "13") {
stopDefault(event);
submitForm(form,'actionDiv');
}
}
function stopDefault(e) {
//If event object is provided, then this is a non-IE browserif(e && ) {
//Block default browser action (W3C)();
} else {
//How to prevent the default action of the function in IE = 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, 102, 204);">"toggleFriendFuncList(event, '6708062', 'he');"</span><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, 102, 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 bubbing 。
return false In the processing of events, default events and bubbling events can be blocked.
2）()：In event handler ,prevent default event (allows bubbling) 。
() In the processing of events, the default event can be blocked but the bubbling event can be allowed to occur.
3）()：In event handler ,prevent bubbling (allows default behavior).
() In the processing of events, bubbling can be prevented but the default event can be allowed to occur.
How to write prototype:
(event)
Usage introduction:
After an event occurs, the browser usually triggers the event handler on the event occurrence element first, 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 the 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 keyif ( == 13 ) {
//Change it to the Tab key, so that every time you press Enter, it will have the effect of Tab, and the cursor will jump to the next object = 9;
}
</script>
<script language="javascript" type="text/javascript">
//Disable the Enter key form automatic submission = function(event) {
var target, code, tag;
if (!event) {
event = ; //For ie browsertarget = ;
code = ;
if (code == 13) {
tag = ;
if (tag == "TEXTAREA") { return true; }
else { return false; }
}
}
else {
target = ; //For browsers that follow the w3c standard, such as Firefoxcode = ;
if (code == 13) {
tag = ;
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=".*" pageEncoding="UTF-8"%>
<%@ include file="/pages/common/"%>
<html>
<head>
<title>I</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/");
$("#chance_search_div").hide();
}
function modifyAppGrp(idName){
var id=encodeURIComponent(idName);
var url = contextName + "/?method=addAppGrp&appGrpName="+id;
retrieveURL(url,'actionDiv');
$("#chance_search_div").hide();
}
function savebusiness(thisForm){
var name = $("#appGrpName").val();
if(()==""){
alert("The group name cannot be empty.");
return;
}
submitForm(thisForm,null,afterSave);
return ;
}
function afterSave(content){
if(content!=null&&content!=""){
var arr = (",");
if(arr[0]=="true"){
$("#chance_search_div").show();
//The current nodevar itemId = "0::" + $("#appGrpName").val();
// Parent node, because this method will be executed only when adding the root application group, so the parent node is uniformly -1var parentId = -1;
//The current node display namevar itemText = $("#appGrpName").val();
//Add new node(parentId, itemId, itemText, doOnClick, '' ,'','');
retrieveURL("${contextPath}/?method=appGrpList","actionDiv");
return;
}
alert(arr[1]);
return;
}
alert("Save failed");
return;
}
function deleteBusiness(thisForm,idName){
if(confirm("Confirm to delete it?")){
var id=encodeURIComponent(idName);
retrieveURL("${contextPath}/?method=deleteAppGrp&appGrpName=" + id,null,null,function(content){
if(content!=null&&content!=""){
var arr = (",");
if(==3&&arr[2]=='y'){
var msg = "There are applications under this application group. Do you need to force delete them?";
if(confirm(msg)){
retrieveURL("${contextPath}/?method=forceDelAppGrp&appGrpName="+id,null,null,afterForceDel);
}
return;
}
if(==2){
if(arr[0]=="true"){
//The current nodeitemId = "0::" + idName;
(itemId);
retrieveURL("${contextPath}/?method=appGrpList","actionDiv");
return;
}
alert(arr[1]);
}
return;
}
alert("Delete failed");
return;
});
return ;
}
}
function afterForceDel(){
if(content!=null&&content!=""){
var arr = (",");
if(arr[0]=="true"){
monitorTree();
retrieveURL("${contextPath}/?method=appGrpList","actionDiv");
return;
}
alert(arr[1]);
return;
}
alert("Save failed");
return;
}
function enter_down(form, event) {
if(== "13") {
stopDefault(event);
submitForm(form,'actionDiv');
}
}
function stopDefault(e) {
//If event object is provided, then this is a non-IE browserif(e && ) {
//Block default browser action (W3C)();
} else {
//How to prevent the default action of the function in IE = false;
}
return false;
}
</script>
</head>
<body>
<table style="width: 100%; align: center;">
<tr>
<td style="text-align:left;">
<div >
<html:form action="?method=appGrpList">
<table class="form_t">
<tr>
<th class="tablelogo"> 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"
onblur="javascript:isSpecialChar(this);" onkeydown="enter_down(, event);"/>
<input type="button" class="button4C" value="Inquiry"
onclick="javascript:submitForm(,'actionDiv');" />
<input type="button" value="Add to" class="button4C" onclick="javascript:addAppGrp();"/>
<br />
</td>
</tr>
</table>
</html:form>
</div>
<div ></div>
</td>
</tr>
</table>
<script><!--
$("#actionDiv").load("${contextPath }/?method=appGrpList&random=" + ());
--></script>
</body>
</html>
The above code for preventing default browser behavior and bubbling behavior of js is all the content I have shared with you. I hope you can give you a reference and I hope you can support me more.