JS Stop event bubble Block browser default behavior (block Hyper Join #)

In front-end development work, we often use "stop event bubbling" and "Block browser default behavior" due to issues such as browser compatibility.

1: Stop event bubbling

JavaScript code

If an event object is provided, this is a non-IE browser
if (e && e.stoppropagation)
So it supports the Stoppropagation () method
E.stoppropagation ();
Else
Otherwise, we need to use IE to cancel the event bubbling
Window.event.cancelBubble = true;
return false;

The code is as follows:

functionstopBubble(e) {

　　if  ( e && e.stopPropagation )    　　  e.stopPropagation(); 　　else    　　  window.event.cancelBubble = true ; }

2. Blocking the browser's default behavior

JavaScript code

If an event object is provided, this is a non-IE browser
if (e && e.preventdefault)
Block default browser action (web)
E.preventdefault ();
Else
How to block the default action of a function in IE
Window.event.returnValue = false;
return false;

The code is as follows:

function  stopDefault( e ) {      if  ( e && e.preventDefault )          e.preventDefault();      else          window.event.returnValue = false ;      return  false ; }

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

A page, there is a form, the button used to submit a form, with jquery to respond to the button's click Action, through post, for the user input is a text box, the user entered after the thing to fill, directly press ENTER, the equivalent of pressing the button, At first did not pay attention to this problem, a press ENTER, jumped to another page, looked up a lot of information, only to find to block the default browser behavior, because the default behavior of Submit form, then your JS will not be executed. Therefore, the default behavior is canceled first. Then execute your JQ to submit. Specific I also say not clear, only know if the text box type= "Submit", directly click on the button will jump to another page, if the type= "button", then click on the button will not appear such a situation, you can press ENTER will jump to another page, the solution, Look at the following code:

JSP Code:

<input type= "text" name= "appgrpname_s" id= "appgrpname_s" onkeydown= "Enter_down (This.form, event);" />

JS Code:

<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 ();} The way to block the default action of the function in the else {//ie window.event.returnValue = false;} return false;} </script>

The above code can be implemented by pressing ENTER when the equivalent of clicking the "Submit" button. And the above code is compatible with IE, FF browser.

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

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

<a onclick= "Togglefriendfunclist (event, ' 6708062 ', ' he ');" ></a>

Because the HREF is a null value, if the browser's default behavior is not blocked, the effect is to refresh the page.
Now all we need to do is stop the HREF link event and go to the onclick event.
The old way of handling:

<a onclick= "Togglefriendfunclist (event, ' 6708062 ', ' he ')," href= "javascript:void (0);" ></a>

jquery notation:
return false in the handling of events, 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 events but allow the occurrence of bubbling events.
3) Event.stoppropagation (): In event handler, prevent Bubbling (allows default behavior).
event.stoppropagation () in the handling of events, you can prevent bubbling but allow the default event to occur

Prototype's wording:
Event.stop (Event)
Usage Description:
After an event occurs, the browser usually first triggers an event handler on the element that occurs, then its parent element, the parent element of the parent element ... And so on, until the root element of the document. This is known as event bubbling, which is the most common way of event propagation. After you've handled an event, you might want to stop the event from spreading, and you don't want it to continue bubbling.
When your program has a chance to handle events, 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 ENTER in a single-line text box, and so on. If you define your own handling of these events, you may want to block the associated default behavior very much.

However, sometimes can not solve the corresponding problem, clearly has been called to block the default browser behavior of the method, you can press ENTER or call the default behavior, and finally did not find the problem, had to disable the return key, is actually the tab instead of enter. The code is as follows:

<script language= "javascript" event= "onkeydown" for= "document" >//if (Event.keycode = = 13) {//Change to Tab key, this   Each time you press ENTER to play the function of the tab, the cursor jumps to the next object event.keycode = 9;  }</script><script language= "javascript" type= "Text/javascript" >//Disable the ENTER key form auto-commit 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 Web standard, such as Firefox code = event.ke              Ycode;                   if (code = =) {tag = Target.tagname;                   if (tag = = "INPUT") {return false;}               else {return true;}    }         }   }; </script>

example of a specific usage:

<! 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"%>

JS Stop event Bubbles block the default behavior of the browser (block Hyper Connection #)