Events do not propagate from a child element?

Posted by Legend on Stack Overflow See other posts from Stack Overflow or by Legend
Published on 2010-05-25T01:01:22Z Indexed on 2010/05/25 1:11 UTC
Read the original article Hit count: 241

Filed under:
|
|
|
|

I was playing around with the Swipe jQuery plugin on my iPod Touch and Android devices. The following works:

<html>
<head>
    <script type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="lib/plugins/jquery.swipe.js"></script>
    <script type="text/javascript">
        $(function() {
              $('body').swipe({
                 swipeLeft: function() { $('#container1').append("Swiped Left!"); },
                 swipeRight: function() { $('#container2').append("Swiped Right!");}
            });
        });
    </script>
    <style type="text/javascript">
        body {width: 300px; height: 300px; background: #000;}
    </style>
</head>

<body>

<div id="container1">
    This is container one
</div>

<div id="container2">
    This is container two
</div>    
</body>

</html>

But if I have something like this:

<html>
    <head>
        <script type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script>
        <script type="text/javascript" src="lib/plugins/jquery.swipe.js"></script>
        <script type="text/javascript">
            $(function() {
                  $('#wrapper').swipe({
                     swipeLeft: function() { $('#container1').append("Swiped Left!"); },
                     swipeRight: function() { $('#container2').append("Swiped Right!");}
                });
            });
        </script>
        <style type="text/javascript">
            body {width: 300px; height: 300px; background: #000;}
        </style>
    </head>

    <body>

    <div id="wrapper">
      <div id="container1">
        This is container one
      </div>

      <div id="container2">
        This is container two
      </div>    
   </div>
  </body>

  </html>

Notice the "wrapper" div around the containers. Now, when I swipe on the div element, I was expecting it to actually trigger the event. This works in iPod touch as expected but does not work on my Android device unless I randomly start swiping everywhere until I happen to swipe on that small wrapper div element itself. I am not sure how to explain this but hink of it as sending events to the wrapper div itself. Both use the WebKit engine. Can someone tell me if I am doing something wrong?

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery