Example on jQuery Event Bubbling Situation
Introduction
I hope you like it. Thanks
Before getting started here, please review the last
post [Simple
Style Switcher using jQuery and CSS], so that you can
understand the basics of the jQuery codes used in this post.
Complete Page Code (You will find Event Bubbling
Situation in this code):
<%@ Page Language="C#"
AutoEventWireup="true"
CodeFile="Default.aspx.cs"
Inherits="Default2"
%>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Exploring
jQuery</title>
<script src="Scripts/jquery-1.4.1.js"
type="text/javascript"></script>
<style type="text/css">
.hidden
{ display: none;
}
.hover
{ cursor: pointer;
background-color: Red;
}
</style>
<script type="text/javascript">
//Mouse
Hover
$(document).ready(function () {
$('#SwitchDIV
b').hover(function () {
$(this).addClass('hover');
}, function
() {
$(this).removeClass('hover');
});
});
//Hiding
DIV
$(document).ready(function () {
$('#SwitchDIV').click(function () {
$('#SwitchDIV
p').toggleClass('hidden');
});
});
</script>
</head>
<body>
<div id="SwitchDIV" style="background-color: Aqua;">
<b>Switchable DIV</b>
<p>
<button>Some
Action</button>
<br />
Welcome to the Student's Section.
Please enter your Enrollment No.
and Password
( type the Enrollment Number and
Password as per the official records )
to access this section and to know
the status of New admission/
Re-registration. In case of any
difficulty in accessing the information,
contact us.
</p>
</div>
</body>
</html>
Look at the following
animated image, that shows how it will look when runs above code.
Please note, I am wishing
to collapse the DIV when click on "Switchable DIV" text but the above system
fails to do that as it also gets collapsed when I click on button, that's
because of Event Bubbling situation. The event is first handled by the button,
then passed up through the DOM tree until it reaches the <div
id="SwitchDIV" style="background-color: Aqua;">, where
our new handler is activated and collapse (hides) the <p>.
Now, to solve this problem
we need to access the event object. This is a DOM construct that is passed to
each element's event handler when it is invoked. It provides information about
the event, such as where the mouse cursor was at the time of the event. It also
provides some methods that can be used to affect the progress of the event
through the DOM.
To use the event object
with above code, we only need to add a parameter to the function and use it
with if condition. Here you go.
//Hiding DIV
$(document).ready(function () {
$('#SwitchDIV b').click(function (event) {
if
(event.target == this) {
$('#SwitchDIV p').toggleClass('hidden');
}
});
});
In above code, I made some
modifications that you can easily understand if you read previous posts or
compare the codes with above one where we fall in Event Bubbling. Above code ensures that the item clicked
on was <div id="SwitchDIV">, not one of its sub-elements. Now clicking on buttons
will not collapse the style switcher.
Now, again run the
program, you will get the desired actions, find my working screen below.
I hope you like it. Thanks
Comments
Post a Comment