Hi All:
I've been doing research on cancelBubble() and stopPropagation(). What I've
discovered is that cancelBubble() works quite well. Unfortunately,
stopPropagation() seems to be a pain. Basically, I understand the theory, but I
just can't get it to work. Below is a simple complete example that demonstrates
how cancelBubble() works. Does anyone have a good example illustrating the
workings of stopPropagation()? I'm a hands on type of programmer. The theory is
hard for me to grasp until I can get it to work on a practical basis. Thank you
much for any help.
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
<title>Accessible HTML Page</title>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<style type="text/css">
div {
position: relative;
}
div.red0 {
left: 0; top: 0;
width: 400px; height: 200px;
background-color: #FF0000;
}
div.green0 {
left: 50px; top: 25px;
width: 300px; height: 150px;
background-color: #00FF00;
}
div.blue0 {
left: 50px; top: 25px;
width: 200px; height: 100px;
background-color: #0000FF;
}
input.btn0 {
position: relative;
left: 50px; top: 25px;
width: 100px; height: 25px;
}
</style>
<script type="text/javascript" language="javascript">
function noBubble()
{
if (window.event.srcElement.tagName == "INPUT") {
window.event.cancelBubble = true;
alert('Button 1 : cancelBubble ON');
}
}
</script>
</head>
<body>
<div>
<h2>onclick</h2>
<div class="red0" onclick="alert('Red DIV')">
<div class="green0" onclick="alert('Green DIV')">
<div class="blue0" onclick="alert('Blue DIV')">
<input id="input0" class="btn0" type="button" value="Button_0"
onclick="alert('Button 0 : cancelBubble OFF')"/>
<input id="input1" class="btn0" type="button" value="Button_1"
onclick="javascript:noBubble();" />
</div>
</div>
</div>
</div>
</body>
</html>
Having problems with message search?
Fill out this form to ensure your group is one of the first to be migrated to the new message search system.
Offline 
Send Email