I think stopPropagation and cancelBubble are equivalent - just work in
different browser brands.
The first two Google hits I got talk about this. Look at
http://www.quirksmode.org/js/events_order.html and
http://www.quirksmode.org/js/introevents.html
Regards, Dave S
----- Original Message -----
From: "shadeoh" <
healthyhiker2005@...>
To: <
JavaScript_Official@yahoogroups.com>
Sent: Tuesday, July 07, 2009 6:18 PM
Subject: [JavaScript] Problem with stopPropagation()
> 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>
>
>
>
>
> ------------------------------------
>
> Visit
http://aiaiai.com for more groups to joinYahoo! Groups Links
>
>
>
--------------------------------------------------------------------------------
No virus found in this incoming message.
Checked by AVG - www.avg.com
Version: 8.5.375 / Virus Database: 270.13.7/2222 - Release Date: 07/07/09
05:53:00
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