However, in today's large web interaction projects, such as large webgame projects, the JavaScript event bubbling effect is worth paying attention to. This article is a simple example of JavaScript event bubbling and usage considerations.
If you're not impressed by the JavaScript event bubbling, take a look at my previous blog, "JavaScript event bubbling Introduction and application." This paper is practical and does not elaborate on the basic knowledge of JavaScript event bubbling.
Before the article starts, now look at the following requirements: The following HTML hypothesis describes a webgame Project parcel bar (the person who played the game should know what a parcel bar or item bar is) outside the frame, drag the parcel title bar to drag this parcel to any location on the page, and click on the right side of the title bar The "X" Close button can turn off the display of this parcel bar. By looking at the HTML structure, you can see that the Close button is actually a link, and it is a child element that is H5 as a title bar. To drag an element, we think of registering the MouseDown event with the dragged handle element, and closing the package by clicking or clicking the Close button. Based on this requirement, we quickly get the following code.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title>javascript event bubbling instance one </title> <style type=" Text/css "> #box {width:200px; height:100px; BORDER:2PX Solid Blue} #box h5 {margin:0; padding:2px 5px; font-size:18px; text-align:right; background:blue; cursor:move #box h5 a {Text-decoration:none color: #FFF} </style> </pead> <body> <div id= "box" > <p Onmousedown= "StartDrag ();" >x</p> <div id= "TestInfo" ></div> </div> <script type= "Text/javascript" > Function St Artdrag () {document.getElementById (' testinfo '). InnerHTML + = ' StartDrag '; function CloseBox () {document.getElementById (' testinfo '). InnerHTML = = ' CloseBox '; } </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
In the above example, you find that when you click the Close button, the MouseDown event in the title bar is triggered, obviously, as you would expect, because you know this is the JavaScript event bubbling at work. In fact, the effect you really want is to click the Close button, do not perform the title H5 registered MouseDown event, so you think of blocking event bubbling, and then the code changes to the following:
Copy Code code as follows:
<div id= "box" >
<div id= "TestInfo" ></div>
</div>
<script type= "Text/javascript" >
function StartDrag ()
{
document.getElementById (' TestInfo '). InnerHTML + = ' startdrag<br/> ';
}
function CloseBox (e)
{
document.getElementById (' TestInfo '). InnerHTML + = ' closebox<br/> ';
Stopbubble (e);
}
Block event bubbling function
function Stopbubble (e)
{
if (e && e.stoppropagation)
E.stoppropagation ();
Else
Window.event.cancelbubble=true;
}
</script>
As a result, you find that when you click the Close button, the title H5 registered MouseDown event is executed, what's going on? In fact careful you may find that the H5 title and a link registration events are not the same, in the above code, we invoke the Block event method in the Click event of a link registration, which simply means that the "similar event" registered by its parent element does not execute, meaning that if the H5 header also registers the Click event, This click event will not execute, and the MouseDown here will continue to execute. The MouseDown execution here is not due to the fact that you clicked on the title bar, it is because you have a MouseDown event when clicking Click, and then because of the JavaScript event bubbling mechanism, The event is broadcast to the parent and captured by the H5 header MouseDown registration method. Regarding this understanding, may refer to my another blog "When OnMouseDown, OnMouseUp, onclick simultaneously applies to the same label node element". Now, through the analysis, you should know how to do, small change the above code, as long as the click of a link to change the event to the same as the H5 title of the MouseDown event, you want to achieve the effect.
Related Topics:
Now let's talk about how to easily block event bubbling when using jquery development. jquery, as an excellent scripting framework, is naturally superior to encapsulation of events and browser-compatible handling. To learn more you can also read one of my other blogs, "using jquery's $.event.fix function to unify browser event handling."
Using jquery There are two ways to block event bubbling:
1, using jquery to do compatible with the event object, directly using Event.preventdefault (), example code as follows:
Copy Code code as follows:
<script type= "Text/javascript" src= "Http://img.jb51.net/jslib/jquery/jquery.js" ></script>
<div id= "box" >
<div id= "TestInfo" ></div>
</div>
<script type= "Text/javascript" >
function StartDrag ()
{
document.getElementById (' TestInfo '). InnerHTML + = ' startdrag<br/> ';
}
function CloseBox (e)
{
document.getElementById (' TestInfo '). InnerHTML + = ' closebox<br/> ';
var event = $.event.fix (e);
Event.stoppropagation ();
}
</script>
2. Returns false in the jquery-bound function, that is, return false. Note: It is no use to return false with a method that is not bound with jquery. The code is as follows:
Copy Code code as follows:
<script type= "Text/javascript" src= "Http://img.jb51.net/jslib/jquery/jquery.js" ></script>
<div id= "box" >
<div id= "TestInfo" ></div>
</div>
<script type= "Text/javascript" >
function StartDrag ()
{
document.getElementById (' TestInfo '). InnerHTML + = ' startdrag<br/> ';
}
function CloseBox ()
{
document.getElementById (' TestInfo '). InnerHTML + = ' closebox<br/> ';
return false;
}
$ (' #box a '). Bind (' MouseDown ', closebox);
</script>
Finally, let's say that the second method blocks event bubbling and also blocks the browser's default behavior, in the handle method of the source code for jquery event processing (jquery JavaScript Library v1.3.2 uncompressed code 2700 lines) we can see the following processing, Event.preventdefault () is used to block browser default behavior.
Copy Code code as follows:
Handle:function (Event)
{
Other code ...
if (ret = false)
{
Event.preventdefault ();
Event.stoppropagation ();
}
Other code ...
}
Author: Webflash
