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>
------------------------------------
Visit http://aiaiai.com for more groups to joinYahoo! Groups Links
<*> To reply to this message, go to:
http://groups.yahoo.com/group/JavaScript_Official/post?act=reply&messageNum=16710
Please do not reply to this message via email. More information here:
http://help.yahoo.com/help/us/groups/messages/messages-23.html
<*> Your email settings:
Individual Email | Traditional
<*> To change settings online go to:
http://groups.yahoo.com/group/JavaScript_Official/join
(Yahoo! ID required)
<*> To change settings via email:
mailto:JavaScript_Official-digest@yahoogroups.com
mailto:JavaScript_Official-fullfeatured@yahoogroups.com
<*> To visit your group on the web, go to:
http://groups.yahoo.com/group/JavaScript_Official/
<*> To unsubscribe from this group, send an email to:
JavaScript_Official-unsubscribe@yahoogroups.com
<*> Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/
0 comments:
Post a Comment