0.82 scrollend fires after touchend [Archive]

watrboy00

8 Jun 2010, 1:48 PM

Using this example...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Scroller</title>
<link rel="stylesheet" href="../../resources/css/ext-touch.css" type="text/css" />
<style type="text/css">
#content
{
height:500px;
width:500px;
}
</style>
<script type="text/javascript" src="../../ext-touch-debug.js"></script>
<script language="javascript" type="text/javascript">
Ext.setup({
onReady: function() {
var config = {
bounces: false,
momentum: false,
horizontal: true,
scrollbars: true,
vertical: false
},
el = Ext.fly('content'),
scroller = new Ext.util.Scroller(el, config);

Ext.util.Observable.capture(scroller, function() {
console.log( arguments );
});
}
});
</script>
</head>
<body></body>
</html>

will generate the following output by touching and dragging your cursor across the screen:

["touchstart", Object { event=Object, more...}, Object { bounces=false, more...}]
["scrollstart", Object { event=Object, more...}, Object { bounces=false, more...}]
["scroll", Object { bounces=false, more...}, Object { x=0, more...}]
["scroll", Object { bounces=false, more...}, Object { x=0, more...}]
["scroll", Object { bounces=false, more...}, Object { x=0, more...}]
["scroll", Object { bounces=false, more...}, Object { x=0, more...}]
["scroll", Object { bounces=false, more...}, Object { x=0, more...}]
["scroll", Object { bounces=false, more...}, Object { x=0, more...}]
["scroll", Object { bounces=false, more...}, Object { x=0, more...}]
["scroll", Object { bounces=false, more...}, Object { x=0, more...}]
["scroll", Object { bounces=false, more...}, Object { x=0, more...}]
["scroll", Object { bounces=false, more...}, Object { x=0, more...}]
["touchend", Object { event=Object, more...}, Object { bounces=false, more...}]
["scrollend", Object { bounces=false, more...}]

Seems like 'touchend' should come after 'scrollend'. Any thoughts as to why it was setup like this?

TommyMaintz

8 Jun 2010, 9:39 PM

I actually gave this a lot of thought and switched several times, but basically the touchstart, touchend, and touchmove events are always fired before any other events in their category. The idea behind this is that it gives them the ability to return false and cancel the firing of more "specialized" events like tapstart, scroll, swipe, tap etc. That is very useful in a lot of situations.

My reasoning might be wrong here, so I would definitely like to hear your arguments for firing them afterwards. I will also discuss this with Aaron and Jamie tomorrow.

I believe Carousel was one of these examples where this order of firing helped me out, but there are other cases as well.