My Question is straight. Is there any way to detect that the scroll to a page has been due to javascript or mouse scroll. I really need to identify the difference.
Is there anybody who can help me to figure out the difference between the scroll made by mouse of a user or it has been due to jQuery or java script scroll event
I am working on a co browsing app, so there is transfer of events among multiple users. I am able to manage all the events except scroll. It lets the system to infinite scroll if scrolling from agent.html is recorded. you can see the app by opening the urls 182.71.103.93/screen2/client23122014.html and then 182.71.103.93/job_tree
Not exactly what you're asking but this will detect a mouse wheel event and therefore if it's not a mousewheel event it's caused by JS. You can use the "mousewheel" ("DOMMouseScroll" in Firefox) event in JS. Example:
// Chrome/Safari/Opera/New IE
$('html','body').addEventListener("mousewheel", MouseWheelHandler, false);
// Firefox
$('html','body').addEventListener("DOMMouseScroll", MouseWheelHandler, false);
// Old IE
$('html','body').addEventListener("onmousewheel", MouseWheelHandler, false);
var MouseWheelHandler = function(e) {
var e = window.event || e; //IE support
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
// Do whatever with the delta value
}
Answer give by Termhn was good enough but if anyone stuck to the similar situation as of mine then you may use a global javascript variable
i did it in a way
For Client / user side
var emit_scroll_event=true;
socket.on('agentwindowscroll',function (msg){emit_scroll_event=false; jQuery(document).scrollTop(msg); });
//window scroll logic goes here
jQuery(document).scroll(function()
{
var scrollFromTop=jQuery(document).scrollTop();
if(emit_scroll_event)
{
socket.emit('windowscroll', scrollFromTop);
}
emit_scroll_event=true;
});
For Agent side we may use similar code
var emit_scroll_event=true;
//agent window scroll logic goes here
jQuery(document).scroll(function()
{
var scrollFromTop=jQuery(document).scrollTop();
if(emit_scroll_event)
{
socket.emit('agentwindowscroll', scrollFromTop);
}
emit_scroll_event=true;
});
//responding to client scroll
socket.on('windowscroll',function (msg){emit_scroll_event=false; jQuery(document).scrollTop(msg); });
Note: This is not entire code. It is just the part of code that i used which helped me to sort out mine issue. It is not for normal javascript. It is used with Node js with Scoket.io module
Related
I'm using -webkit-overflow-scrolling:touch to make a div with overflow:scroll; scroll smoothly through iOS touch events.
It works brilliantly, except it doesn't seem to update element.scrollTop or element.scrollLeft while it's scrolling. It only updates element.scrollTop / triggers a scroll event when the momentum runs out and it stops.
Does anyone know of a way of finding out its current scroll position and if there's an event I can listen for? I wondered if it can be found through a CSS3 property perhaps? Thanks
Example below showing two attempts:
<!DOCTYPE html>
<body>
<div id="display_a">Scroll is: 0</div>
<div id="display_b">Scroll is: 0</div>
<div id="element" style="width:800px;overflow-x:scroll;-webkit-overflow-scrolling:touch;">
<div style="font-size:100px;width:1850px;">
a b c d e f g h i j k l m n o p q r s t u v w x y z
</div>
</div>
<script>
var e = document.getElementById("element");
var display_a = document.getElementById("display_a");
var display_b = document.getElementById("display_b");
e.addEventListener("scroll",function(event){display_a.innerHTML = "Scroll is: " + event.target.scrollLeft;});
setInterval(function(){display_b.innerHTML = "Scroll is: " + e.scrollLeft;},100);
</script>
</body>
</html>
============ UPDATE ============
iOS 8 has sorted this behaviour. Scroll events are now triggered while scrolling.
Note that you'll now have to deal with negative scroll values during the bounce scroll.
In the iOS Developer Library, there is an explanation in the Safari guidelines about it:
http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
Basically, the event flow for the scrolling goes like this:
touch/start dragging(mousewheel event)-> pan/movement(no events) -> stop(onscroll)
So there is nothing like a continuous event of scrolling being triggered while the pan happens there just an onScroll at the end of the gesture.
If you find an optional way to accomplish that, let me know :)
This might help. It's a jQuery solution that I'm using to force pagination on IOS side-to-side swipes. It's not exactly the same case as you're working. I'm using the "overflow-scrolling:auto" which does not behave like the "touch" version.
#yourDiv {
-webkit-overflow-scrolling: auto;
overflow:auto;
}
I use "overflow-scrolling:auto" because it reacts quicker to the touchend event. Unfortunatley, "overflow-scrolling:touch" does indeed seem to resist javascript and CSS animation while it's in motion. But at least you can get some location information out of it during the scroll.
var pageSwiping = false;
$('#yourDiv').on('scroll', function(e) {
if (pageSwiping !== true ) {
pageSwiping = true;
var offset = $('#'+e.target.id).scrollLeft();
$('#yourDiv').one( 'touchend',{elem:e.target.id,dragStart:offset},divMove);
};
});
var divMove = function(e) {
pageSwiping = false;
var elem = e.data.elem;
var dragEnd = $('#'+elem).scrollLeft();
var dragDelta = (dragEnd - e.data.dragStart)
// Make page-alignment decisions based on dragDelta
};
In a similar situation I am using scrollability.js, which does a really nice job simulating the native scrolling behavior. I'm then listening for the 'scrollability-start' event and monitoring the top/left attributes of the scrolled element. I know it's not ideal, but it's a decent alternative.
Here is my repository where I've added the callback onScrolling() to let me know when the momentum scrolling animation is occurring in animate(): https://github.com/simpleshadow/iscroll/blob/master/src/iscroll.js
I've made an example app using his suggestion here: http://jsfiddle.net/simpleshadow/wQQEM/22/
#robertlawson86 on Github made this suggestion to help provide an idea on when to grab the position during momentum scrolling. See example and discussion: https://github.com/cubiq/iscroll/issues/183
I know is weird, but you can keep track of scrollLeft/scrollTop just by registering touchstart event:
e.addEventListener("touchstart",function(event){});
Get the position of a horizontal scroller while srolling ( via css overflow-y:scroll )
$('#myNode').bind('scroll', function(e){
var myPos = e.target.scrollLeft;
// do something with myPos but don't naughty
})
If it helps, scrollTop and scrollLeft are updated in real-time within the touchmove event handler:
$(function()
{
var $div = $("#scroll")
var $p = $("#display");
var update = function(e)
{
$p.text( e.type +": "+ $div.scrollLeft() +", "+ $div.scrollTop() );
}
$div.bind( "touchmove", update )
.bind( "scroll", update );
});
I've been working on a project for work where I need to create a Javascript "jump-menu" within a page.
(Q:Wait, a jump-menu? Why don't you just use a elements and namespaces to navigate within your page?
A: Because that would defeat the purpose! So please, don't provide answers like that. I need to do this with Javascript (AND I'M NOT USING JQUERY!!!))
So, here is what I do:
I make a list at the top of the page, and a list at the bottom of the page.
I add an event listener to each list item at the top of the page and I attach a reference to that list items corresponding content item within the page.
When the link at the top is clicked, I grab to offsetTop of the item I want to scroll to, and I set either the document.body.scrollTop or the window.pageYOffset.
I've never actually needed the window.pageYOffset, but somewhere told me it would work and I never removed it from my code. Either way, this appears to work with the document.body.scrollTop in Chrome, Safari, and Opera, yet it doesn't work in Firefox or IE. Why?
Here is the code block where I set the document.body.scrollTop:
if(elem.jump_ref)
{
if(document.body.scrollTop || document.body.scrollTop === 0)
{
document.body.scrollTop = elem.jump_ref.offsetTop - page_top_padding;
}
else if(window.pageYOffset || window.pageYOffset === 0)
{
window.pageYOffset = elem.jump_ref.offsetTop - page_top_padding;
}
}
And Heres The Project In JSFIDDLE
I've stepped through and found that "Yes, I am grabbing the right element." and "Yes, I am setting the document.body.scrollTop, and "No, I am not setting the document.body.scrollTop to zero." and yet it still doesn't work! Please help! My webpage is supposed to go public on Tuesday!
Well, I believe I have found my answer. So far, it appears to work in Chrome, Firefox, IE, Opera, and Safari (these were the only ones I was able to test). I don't know what type of mobile support this feature will have (if any), but my page already has an entirely different functionality for mobile anyway.
Either way, here's the fix. Its the window.scrollTo method!:
this.jump = function(evt)
{
var elem = evt.srcElement || evt.currentTarget;
var page_top_padding = 100;
if(elem.jump_ref)
{
window.scrollTo(0, (elem.post_ref.offsetTop - page_top_padding));
}
}.bind(this);
And like I said, it works great in nearly everything! Everything except JSFiddle. lol. I don't quite get it, but luckily no one is going to be visiting my webpage in JSFiddle.
I've written a rather basic js function that programatically and automatically aligns the iPhone keyboard perfectly underneath each and every input field that gets focused (feel free to use it if you like it!). The alignment's primarily handled by window.scroll - a standard method that works in any browser view, except in UIWebView hence phonegap/cordova (2.1). So I need a workaround.
My working code:
function setKeyboardPos(tarId) {
//programmatically: set scroll pos so keyboard aligns perfectly underneath textfield
var elVerticalDistance = $("#"+tarId).offset()["top"]; //i.e. 287
var keyboardHeight = 158;
var heightOfView = document.height; // i.e. 444
var inputHeight = $("#"+tarId).outerHeight();
var viewPortSpace = heightOfView-keyboardHeight; //i.e. 180
var verticalNewSroll = (elVerticalDistance+inputHeight)-viewPortSpace;
if(verticalNewSroll<0) { verticalNewSroll = 0; }
////
//OK, all done lets go ahead with some actions
$("#footer").hide(); //hide footer so that the keyboard doesn't push it on top of textfield
$("#containingDiv").css("bottom","0px"); //remove bottom space for footer
window.scrollTo(0,verticalNewSroll); //scroll! where the problem starts
}
Working in everything but UIWebView, that is. As I mentioned above, everything works except the window.scrollTo (N.B. some minor changes have been made for the sake of clarity). So does anyone know of an alternative solution or even a good workaround?
Similar questions
window.scrollTo doesn't work in phonegap for IOS
PhoneGap / Cordova scrollTo Ignored
How to add vertical scroll in Phonegap
Above are furthermore three similar questions that somewhat points one in the right direction. One of the answerers mentions the use of css to accomplish this. Can anyone come up with a more concrete example? Another guy suggests anchors but that's not a very pretty solution and doesn't go very well with the rest of my code.
After doing some research, I realized window.scrollTo() does actually work in iOS6 with phonegap 2.1, there was something else that failed; for some reason, document.height didn't yield a property of equal proportion within UIwebView so I had to write a small workaround. I'll post the solution and the entire code below for future reference.
function setKeyboardPos(tarId) {
//programmatically: set scroll pos so keyboard aligns perfectly underneath textfield
var elVerticalDistance = $("#"+tarId).offset()["top"];
var keyboardHeight = 157;
if(isNativeApp()) { keyboardHeight = 261; } //I choose to change the keyboard height for the sake of simplicity. Obviously, this value does not correnspond to the actual height of the keyboard but it does the trick
var keyboardTextfieldPadding = 2;
var heightOfView = document.height;
var inputHeight = $("#"+tarId).outerHeight();
var viewPortSpace = heightOfView-keyboardHeight-keyboardTextfieldPadding; //180
var verticalNewSroll = (elVerticalDistance+inputHeight)-viewPortSpace;
if(verticalNewSroll<0) { verticalNewSroll = 0; }
////
//OK, all done lets go ahead with some actions
$("#footer").hide(); //hide footer so that the keyboard doesn't push it on top of textfield
$("#containingDiv").css("bottom","0px"); //remove bottom space for footer
window.scrollTo(0,verticalNewSroll); // perform scroll!
}
function isNativeApp() {
var app = (document.URL.indexOf('http://') === -1) && (document.URL.indexOf('https://') === -1);
if (app) {
return true; // PhoneGap native application
} else {
return false; // Web app / safari
}
}
you can try and use the animate and scrollTop property to scroll It looks something like this:
$("html, body").animate({ scrollTop: "The value to scroll to" });
Hope this helps.
You just need to use this:
$(window).scrollTop(0);
Well, this will be a tough one. I think i have exhausted all my options, let's see if you can come up with something better.
I have a horizontal carousel and am using touchstart, touchmove, touchend to control it. For the sake of this example, the html structure is something like:
<div>
<ul id="strip">
<li><a>...</a></li>
<li><a>...</a></li>
...................
</ul>
</div>
I have separated my eventhandlers to behave a bit differently from mouse to touch events, so, thinking only of touch, I have:
var strip = document.getElementById('strip');
strip.addEventListener('touchstart', touchStartHandler);
document.addEventListener('touchmove', touchMoveHandler);
document.addEventListener('touchend', touchEndHandler);
I want the horizontal scrolling to work even if the user has his finger outside my strip, so I attached the touchmove and touchend event to the document.
At first, I thought it would be natural to, while the user was scrolling my carousel, for the browser to stay put, so my touchMoveHandler looked something like:
function touchMoveHandler(evt){
evt.preventDefault();
...................
}
... this way, the browser wouldn't pan vertically when the user's finger positioned varied in the Y axis. Our usability guy, thinks otherwise, and I actually agree with him now. He wants the browser to respond normally, unless the movement of the finger is totally or near perfectly horizontal.
Anyway, this is probably too much information, so I am going to detail my actual problem now. This is a snippet of the prototype I'm working on as a proof of concept:
var stopY, lastTime, newTime;
var touchStartHandler(evt){
...
stopY = true;
lastTime = new Date();
...
};
var touchMoveHandler(evt){
...
//this following code works like a setInterval, it turns stopY on and off every 1/2 sec
//for some reason, setInterval doesn't play well inside a touchmove event
newTime = new Date();
if(newTime - lastTime >= 500){
stopY = !stopY;
lastTime = newTime;
}
...
if(stopY){
evt.preventDefault();
}
...
}
I am absolutely sure this code is pristine, I debugged it with console logs and everything is doing what it's supposed to do except for the computing of the browser panning through the stopY variable.
If I run the code starting with stopY = true, there is no browser panning, if I start with stopY = false, the browser pans as expected. The problem is that I would expect this behaviour to change every half a second and it doesn't.
I hope I didn't complicate this too much for you, but this is really specific.
Update:
You can try the following links (on an Ipad, or Iphone):
http://andrepadez.com/ipadtouch
http://andrepadez.com/ipadtouch?stopy=false
use view source, to see the whole code
Can you try stopY = !stopY;?
UPDATE
Once you execute preventDefault(), scrolling will can not return until touchend fires or you enable it. The following may give you the behavior you are looking for:
if(stopY){ return false; }
else { return true; }
or for simplicity just return !stopY;...
I'm trying to use JavaScript and jQuery to capture touch events. But I'm seeing some very odd behavior in the Web browser on Android 2.3.2: whenever I tap the screen, and then quickly tap somewhere else on the screen, the browser:
momentarily shows an orange border and highlight over the entire screen, and
sends me the wrong events.
The orange border seems to be just a related symptom of the same underlying problem, so I'm not too worried about it -- it's actually convenient for being able to tell when the browser is screwing things up. What I really want to know is, how can I consistently get the right touch events for two quick taps? I believe that when that problem is solved, the orange border will go away as well.
What follows are all the painful details I've worked out so far.
Here's a page that shows the problem and displays lots of diagnostic information about the details and timing of each event that's received. You're sure to get the orange flash / bad events if you tap inside the blue rectangle, then quickly tap inside the black rectangle.
My jQuery code is pretty standard. The log function's implementation isn't important; the problem is that the browser doesn't call it when it should.
el = $('#battle');
el.on('touchstart', function(event) {
log(event);
return event.preventDefault();
});
el.on('touchend', function(event) {
return log(event);
});
el.on('touchcancel', function(event) {
return log(event);
});
el.mousedown(function(event) {
log(event);
return event.preventDefault();
});
return el.mouseup(function(event) {
return log(event);
});
More details on the phenomena I described initially:
Orange border and highlight: This is the same orange border and highlight that the browser draws around a hyperlink when you click it. But there are no hyperlinks on the page, and the browser draws this orange border around the whole screen -- or more specifically, around the outer <div id="battle"> that I'm hooking events on via jQuery.
Wrong events: In my touchstart event handler, I'm calling event.preventDefault(), to tell the browser not to scroll, not to synthesize mouse events, etc. Therefore, I expect to get only touchstart and touchend events. And I do, for the first tap. But instead of touchstart/touchend for the second tap, I get all number of combinations of touch events, synthesized mouse events, and the occasional touchcancel for the second tap, or even repeated events for the first tap. Details below.
This behavior also only occurs in very particular circumstances:
The first tap must be short (less than ~200ms).
The second tap must come quickly thereafter (less than ~450ms after the first tap's touchstart).
The second tap must be at least 150 pixels away from the first tap (measured along the diagonal from the coordinates of the first tap's touchstart).
If I remove my code that hooks mousedown and mouseup, the orange rectangles no longer appear. However, the touch events are sometimes still garbled.
As far as what I mean by the events being garbled, here's what I see. When I write "1:", that means the events are for the first tap's coordinates; "2:" means the second tap's coordinates. I saw the following patterns of events (percentages indicate how many times each one came up after 100 trials):
(50%) 1:touchstart 1:touchend 1:mousedown 1:mouseup (short delay) 2:mousedown 2:mouseup
(35%) 1:touchstart 1:touchend 2:touchstart 1:mousedown 1:mouseup 2:touchend
(10%) 1:touchstart 1:touchend 2:touchstart 1:mousedown 1:mouseup 2:touchcancel (short delay) 2:mousedown 2:mouseup
(3%) 1:touchstart 1:touchend 2:touchstart 2:touchend (short delay) 1:mousedown 1:mouseup
(2%) 1:touchstart 1:touchend 1:mousedown 1:mouseup (and nothing at all for the second tap)
Some combinations of events seem to come up more often depending on how quickly I tap, but I haven't quite nailed down the pattern. (Two quick, crisp taps seem more likely to come in under the second item above, whereas a more rapid-fire approach with less emphasis on crispness seems more likely to be the first item. But I haven't identified specific timing numbers that lead to each.) Similarly, the "short delays" indicated above can be anywhere from ~150ms to ~400ms; I haven't reverse-engineered the whole pattern there either.
If I don't hook mousedown and mouseup, the distribution is roughly this:
(40%) 1:touchstart 1:touchend 2:touchstart 2:touchcancel
(35%) 1:touchstart 1:touchend 2:touchstart 2:touchend (the actual desired behavior)
(25%) 1:touchstart 1:touchend (and nothing at all for the second tap)
So if I don't hook the mouse events, it works a third of the time; and if I was willing to pretend that touchcancel meant the same thing as touchend, I could get that up to 75% of the time. But that's still pretty sucky.
Alternatives I've already tried:
I've tried using jQuery Mobile's vmousedown and vmouseup events, but they aren't always triggered for the second tap, I suspect because of this same underlying event weirdness.
I could just forget about touch events entirely and only use the synthesized mouse events, but there's usually about a half-second delay between the physical tap and the delivery of the synthesized mouse event, whereas the touch events are immediate so I can be more responsive. I also want to prevent scrolling -- this is for a fullscreen game, and I'd rather not have the user accidentally scrolling the address bar back into view and blocking part of the game -- and doing preventDefault on the touchstart usually achieves that (though occasionally the second tap is actually able to scroll the screen despite my preventDefault... another reason I want to solve this whole event mess).
I've tried a third-party Web browser (Dolphin), but it has the same problems with events. So I'm guessing it's probably a problem with the way the underlying WebView delivers events to scripts.
Can anyone suggest a way to change my HTML, my event handlers, or anything else in order to reliably get touch events for two quick taps in succession?
Having tried to develop multi-touch HTML5 games in the Android browser (and trying them in other Android compatible browsers too), I think Android 2.x's browser simply does not properly support touch input. For starters, it doesn't support multi-touch which makes some kinds of game unplayable. (Obviously the phone supports multi-touch because you can pinch zoom etc., but the browser doesn't.) Then there are lots of problems with latency, touches 'sticking' and so on. I vaguely remember reading something about the phone's drivers for touch inputs not really working with true multitouch (i.e. it can detect either single touch or pinch zooms and that's it), but I don't have any references to back that up...
Apparently Android 4 (Ice Cream Sandwich) fixes it. So you might just have to wait for Android 4, which should be out soon anyway, and try again. Beyond that, Google have announced they're planning to replace the Android Browser with a mobile version of Chrome in future, so hopefully at least by then our browser touch-input woes will be over.
This is a theory: Wasn't able to test extensively
According to the init function in the soruce code of a webview, the statement setFocusable(true) is always called on a webview during its initialisation.
When I tried to make the view not focusable anymore using setFocusable(false) the error did not happen again. It seems the orange box does not appear. I was testing this on a small samsung phone running os 2.3.4. What I am sure of is that this orange box did not re appear.
In case this turns out to be true, it is highly likely that we can solve this without our own webview. What makes things more complicated is if setting the focusable property to false triggers other problems.
Finally, I do not think we can control this property from javascript (or can we?). Maybe You can declare that a specific control or the whole document is not an input or something like that? I am only extrapolating so bare that this may be false.
Edit: Regarding your comment on your question
I just created a blank application with only a Webview that loads your url after setting its focusable property to false. Please, if you have more resources to test it, I will upload it for you to try it. Here is the application
Have you tried using the jQuery Mobile events? You can find the decoupled widgets/plugins here:
https://github.com/jquery/jquery-mobile/tree/master/js
You'll probably need jquery.mobile.event.js and jquery.mobile.vmouse.js
Now you can simply bind to the tap, swipe etc. events within jQuery. Or is it necessary to differentiate between the start and end of a tap?
instead of attach all event using on you try this may be it works for you
$("...").bind("mousedown touchstart MozTouchDown", function(e) {
if(e.originalEvent.touches && e.originalEvent.touches.length) {
e = e.originalEvent.touches[0];
} else if(e.originalEvent.changedTouches && e.originalEvent.changedTouches.length) {
e = e.originalEvent.changedTouches[0];
}
// Handle mouse down
});
Have you tried attaching the event directly?
$(document).ready(function(){
var el, hypot, log, prev, resetTimeout, start, prevTouchX, prevTouchY;
var resetTimeout = null;
var start = null;
var prev = null;
var resetTimeout;
var hypot = function(x1, y1, x2, y2) {
var dx, dy, h;
dx = x2 - x1;
dy = y2 - y1;
h = Math.sqrt(dx * dx + dy * dy);
return Math.round(h * 10) / 10;
};
var logf = function(event) {
var div, table, values, x, y, _ref, _ref2, _ref3, _ref4, _ref5, _ref6;
if (event.type === "touchend"){
x = prevTouchX;
y = prevTouchY;
} else {
x = event.touches[0].pageX;
y = event.touches[0].pageY;
prevTouchX = x;
prevTouchY = y;
}
div = $('.log :first');
table = div.find('table');
if (table.length === 0) {
$('.log div:gt(1), .log hr:gt(0)').remove();
table = $('<table border style="border-collapse: collapse;"><tr>\n<th rowspan="2">Event</th>\n<th rowspan="2">X</th>\n<th rowspan="2">Y</th>\n<th colspan="4">From start</th>\n<th colspan="4">From prev</th>\n</tr><tr>\n<th>ΔT (ms)</th>\n<th>ΔX</th>\n<th>ΔY</th>\n<th>Distance</th>\n<th>ΔT (ms)</th>\n<th>ΔX</th>\n<th>ΔY</th>\n<th>Distance</th>\n</tr></table>');
div.append(table);
}
values = {
time: event.timeStamp,
x: x,
y: y
};
if (start == null) {
start = values;
}
if (prev == null) {
prev = values;
}
table.append("<tr>\n<td>" + event.type + "</td>\n<td>" + x + "</td>\n<td>" + y + "</td>\n<td>" + (event.timeStamp - start.time) + "</td>\n<td>" + (x - start.x) + "</td>\n<td>" + (y - start.y) + "</td>\n<td>" + (hypot(x, y, start.x, start.y)) + "</td>\n<td>" + (event.timeStamp - prev.time) + "</td>\n<td>" + (x - prev.x) + "</td>\n<td>" + (y - prev.y) + "</td>\n<td>" + (hypot(x, y, prev.x, prev.y)) + "</td>\n</tr>");
prev = values;
if(resetTimeout !== null){
window.clearTimeout(resetTimeout)
}
resetTimeout = window.setTimeout(function(){
start = null;
prev = null;
$('.log').prepend('<hr/>');
}, 1000);
};
var battle = document.getElementById("battle");
battle.addEventListener("touchstart",logf, false);
battle.addEventListener("touchmove",function(e){logf(e);e.preventDefault();}, false);
battle.addEventListener("touchend",logf, false);
battle.addEventListener("touchcancel",logf, false);
});
(Sorry if the code is really sloppy, I wasn't really paying much attention to the log function, but I made to make some minor changes as it wasn't firing correctly at my touchend event as event.touches[0].pageX is undefined at that point. Also, I wrapped it in a ready function, because I was just being lazy :-P)
Since this is only tracking the first touch (event.touches[0]), you can probably make some adjustments to test multi-touch by going down the touches array. What I've discovered on my android device (gingerbread) was that if you have two fingers down on the screen simultaneously, the touchend event will only fire when the last touch is let go; i.e. the second finger release.
Also, when I attached the mousedown/mouseup event listeners, then I got the same exact thing you did with the whole orange highlight thingy.
The device I tested on was a Samsung Droid Charge with OTA Gingerbread update.