Loading ...
Sorry, an error occurred while loading the content.

Problem with stopPropagation()

Expand Messages
  • shadeoh
    Hi All: I ve been doing research on cancelBubble() and stopPropagation(). What I ve discovered is that cancelBubble() works quite well. Unfortunately,
    Message 1 of 2 , Jul 7, 2009
    • 0 Attachment
      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>
    • David Smart
      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
      Message 2 of 2 , Jul 7, 2009
      • 0 Attachment
        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
      Your message has been successfully submitted and would be delivered to recipients shortly.