Events do not propagate from a child element?
- by Legend
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?
