JS block default browser behavior and bubble behavior implementation code _javascript tips

In the front-end development work, because of browser compatibility issues, we often use "stop event bubbling" and "block browser default behavior."

1. Block Browser default behavior

function Stopdefault (e) { 
//If an event object is provided, this is a non-ie browser if 
(e && e.preventdefault) { 
//block default browser action (web) 
E.preventdefault (); 
} How else { 
//ie prevents the default action of the function in 
Window.event.returnValue = false; 
} 
return false; 
} 

2. Stop event bubbling

function Stopbubble (e) { 
//If an event object is provided, this is a non-ie browser if 
(e && e.stoppropagation) { 
//　　It therefore supports the stoppropagation () method of the 
e.stoppropagation (); 
} else { 
//Otherwise, we need to use IE to cancel event bubbling 
Window.event.cancelBubble = true; 
} 
return false; 
} 

Concrete Application Example: Write a good project, today to the user to use, returned a lot of problems, which have a very fine canon:

A page, there is a form, the button used to submit the form is a buttons, with jquery to respond to the button's click Action, through post submission, for the user input is a text box, the user input to fill in after the item, directly press ENTER, it is equivalent to press the button, At the beginning did not pay attention to this problem, a press RETURN, jump to another page, a lot of data, just found to block the browser's default behavior, because the default behavior is submit form, then your JS will not be implemented. So cancel the default behavior first. Then execute your JQ to submit. I can't say for sure, only know if the text box type= "Submit", the direct click of the button will jump to another page, if type= "button", then click the button will not appear in this case, you can press ENTER when you will jump to another page, the solution, Look at the following code:

<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== ")" { 
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 default browser action (web) 
E.preventdefault (); 
} How else { 
//ie prevents the default action of the function in 
Window.event.returnValue = false; 
} 
return false; 
} 
</script> 

By using the above code, you can click the "Submit" button when you press ENTER. And the above code compatible with IE, FF browser.

Sometimes encountered need to screen some of the browser shortcut key behavior, such as: FF press backspace key, will jump to the previous browser history page;

Note to invoke the Stopdefault (event) function in the onkeydown event, the call in the OnKeyUp event is unsuccessful.

Because HREF is a null value, if the browser's default behavior is not blocked, the effect is to refresh the page.

What we need to do now is to block the link events of href and execute the onclick event.

Old way of handling:

jquery's writing:

1) Return False:in event handler, prevents default behavior and event bubbing.
return false in the handling of an event, you can block default events and bubbling events.

2) Event.preventdefault (): In event handler, prevent default event (allows bubbling).
Event.preventdefault () in the handling of events, you can block the default event but allow bubbling events to occur.

3) Event.stoppropagation (): In event handler, prevent bubbling (allows default behavior).
Event.stoppropagation () in the handling of events, you can block bubbles but allow default events to occur

Prototype's writing:

Event.stop (Event)
Usage Introduction:
After an event occurs, the browser usually triggers the event handler on the element where the event occurred first, followed by its parent element, the parent element ... And so on, until the root element of the document. This is known as event bubbling, the most common way to propagate events. When dealing with an event, you may want to stop the event from spreading and not want it to continue bubbling.
When your program has the opportunity to handle an event, if the event has a default behavior, the browser will also handle it. For example, click the navigation link, submit the form to the server, press the ENTER key in a single line of text box, and so on. If you define your own handling of these events, you may be very interested in blocking the associated default behavior.

However, sometimes still can not solve the corresponding problem, obviously has called the browser to prevent the default behavior of the method, you can press the return time or will call the default behavior, and finally did not find the problem, had to turn the key to disabled, is actually using the tab keys instead of enter. The code is as follows:

<script language= "javascript" event= "onkeydown" for= "document" > 
//If the ENTER key is 
(Event.keycode =) { 
Change to the TAB key, so that each time you press Enter the TAB function, the cursor jumps to the next object 
Event.keycode = 9; 
} 
</script> 
<script language= "javascript" type= "Text/javascript" > 
//Disable enter key form autocommit 
Document.onkeydown = function (event) { 
var target, code, tag; 
if (!event) { 
event = window.event//For IE browser 
target = event.srcelement; 
Code = Event.keycode; 
if (code = =) { 
tag = target.tagname; 
if (tag = = "TEXTAREA") {return true;} 
else {return false; 
}}} else { 
target = event.target;//For browsers that follow the standards of the consortium, such as Firefox 
code = event.keycode; 
if (code = =) { 
tag = target.tagname; 
if (tag = = "INPUT") {return false;} 
else {return true;}}} 
; 
</script> 

The specific use of the sample:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" > <%@ page language= "java" import= "java.util.*" Pageenc oding= "UTF-8"%> <%@ include file= "/pages/common/global.jsp"%>  

Above this JS block default browser behavior and bubble behavior of the implementation code is small series to share all the content, hope to give you a reference, but also hope that we support the cloud habitat community.