how can i stop this??

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Ian Richardson
    #1

    how can i stop this??

    I have some example code below where, when I click on the background of
    the table I want one thing to happen (wilma), and when I click on the
    text box I want one different thing to happen (fred).

    ....but when I click on the text box, both happen (fred, then wilma). I'm
    guessing this is to do with event bubbling but I could be thoroughly
    mistaken. Anyway, how can I stop it so when I click on the text box only
    fred occurs?

    <html>
    <head>
    <style>
    table#wilma {
    border-color: green;
    border-style: solid;
    border-width: 2px;
    }
    </style>
    <script>
    function init() {
    document.getEle mentById("fred" ).onclick = function() { alert("fred"); };
    document.getEle mentById("wilma ").onclick = function() { alert("wilma"); };
    }
    </script>
    </head>
    <body onload="init(); ">
    <form id="test" action="" method="post">
    <table id="wilma">
    <tr><td>&nbsp ;</td></tr>
    <tr><td><inpu t type="text" name="fred" id="fred" value="testing" ></td></tr>
    <tr><td>&nbsp ;</td></tr>
    </table>
    </form>
    </body>
    </html>


    TIA

    Ian
    Tags: None
    • Evertjan.
      #2
      Re: how can i stop this??

      Ian Richardson wrote on 07 feb 2004 in comp.lang.javas cript:
      [color=blue]
      > I have some example code below where, when I click on the background
      > of the table I want one thing to happen (wilma), and when I click on
      > the text box I want one different thing to happen (fred).
      >
      > ...but when I click on the text box, both happen (fred, then wilma).
      > I'm guessing this is to do with event bubbling but I could be
      > thoroughly mistaken. Anyway, how can I stop it so when I click on the
      > text box only fred occurs?
      >
      > <html>
      > <head>
      > <style>
      > table#wilma {
      > border-color: green;
      > border-style: solid;
      > border-width: 2px;
      >}
      > </style>
      > <script>
      > function init() {
      > document.getEle mentById("fred" ).onclick = function() { alert("fred");
      > }; document.getEle mentById("wilma ").onclick = function() {
      > alert("wilma"); };
      >}
      > </script>
      > </head>
      > <body onload="init(); ">
      > <form id="test" action="" method="post">
      > <table id="wilma">
      > <tr><td>&nbsp ;</td></tr>
      > <tr><td><inpu t type="text" name="fred" id="fred"
      > value="testing" ></td></tr> <tr><td>&nbsp ;</td></tr>
      > </table>
      > </form>
      > </body>
      > </html>[/color]

      <script>
      var z=true
      function init() {
      document.getEle mentById("fred" ).onclick =
      function() { alert("fred");z =false };
      document.getEle mentById("wilma ").onclick =
      function() { if(z)alert("wil ma");z=true };
      }
      </script>



      --
      Evertjan.
      The Netherlands.
      (Please change the x'es to dots in my emailaddress)

        Comment

        • Ian Richardson
          #3
          Re: how can i stop this??

          Evertjan. wrote:[color=blue]
          > <script>
          > var z=true
          > function init() {
          > document.getEle mentById("fred" ).onclick =
          > function() { alert("fred");z =false };
          > document.getEle mentById("wilma ").onclick =
          > function() { if(z)alert("wil ma");z=true };
          > }
          > </script>[/color]

          Trust me to be thinking about a complex solution when an idiotically
          simple one will do!!

          I'll crawl under my rock again!

          Ian

            Comment

            • Tom Kiefer
              #4
              Re: how can i stop this??

              Another more direct way to do this might be to update Fred's onclick
              assignment like so:

              document.getEle mentById("fred" ).onclick = function() { alert("fred");
              window.event.ca ncelBubble = true; };

              Note that this syntax is IE-specific. Netscape 6 and 7 can do something
              similar, but the syntax is different.

              OTOH, what Evertjan suggested will likely work just as well. :-)

              - Tom Kiefer
              thogek @ earthlink . net


              "Ian Richardson" <zathras@chaos. org.uk> wrote in message
              news:c02eb0$11d jnh$1@ID-99375.news.uni-berlin.de...[color=blue]
              > I have some example code below where, when I click on the background of
              > the table I want one thing to happen (wilma), and when I click on the
              > text box I want one different thing to happen (fred).
              >
              > ...but when I click on the text box, both happen (fred, then wilma). I'm
              > guessing this is to do with event bubbling but I could be thoroughly
              > mistaken. Anyway, how can I stop it so when I click on the text box only
              > fred occurs?
              >
              > <html>
              > <head>
              > <style>
              > table#wilma {
              > border-color: green;
              > border-style: solid;
              > border-width: 2px;
              > }
              > </style>
              > <script>
              > function init() {
              > document.getEle mentById("fred" ).onclick = function() { alert("fred"); };
              > document.getEle mentById("wilma ").onclick = function() { alert("wilma"); };
              > }
              > </script>
              > </head>
              > <body onload="init(); ">
              > <form id="test" action="" method="post">
              > <table id="wilma">
              > <tr><td>&nbsp ;</td></tr>
              > <tr><td><inpu t type="text" name="fred" id="fred"[/color]
              value="testing" ></td></tr>[color=blue]
              > <tr><td>&nbsp ;</td></tr>
              > </table>
              > </form>
              > </body>
              > </html>
              >
              >
              > TIA
              >
              > Ian[/color]


                Comment

                Previous template Next
                Working...