Tuesday, July 7, 2009

Re: [JavaScript] Problem with stopPropagation()

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@yahoo.com>
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

------------------------------------

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=16711
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: