I am using Android to adapting one of my old JavaScript games, and I am wondering why the "touchmove" just fires for the first element I press with my finger. After pressing that element, I move the finger (without releasing it), and when I enter to another element that new element doesn't fire its "touchmove" event.
I made this simple example to test (it is not the actual code I am using it, but it still has the same behaviour):
<html>
<head>
</head>
<body>
<div style="background-color:red; height:33%;" ontouchmove="this.style.background='black';">Box 1</div>
<div style="background-color:blue; height:33%;" ontouchmove="this.style.background='black';">Box 2</div>
<div style="background-color:orange; height:33%;" ontouchmove="this.style.background='black';">Box 3</div>
</body>
</html>
I tried that code on Android's default browser (Samsung Galaxy S3). I start pressing with my finger on "Box 1" (and it becomes black because the event is executed) and then, without releasing the finger, I continue moving it through "Box 2" and "Box 3" but they never get black because their event is never triggered.
What I would expect is a similar behaviour as "mousemove" event on Desktop browsers. You can test the following code on any desktop browser with JavaScript enabled:
<html>
<head>
</head>
<body>
<div style="background-color:red; height:33%;" onmousemove="this.style.background='black';">Box 1</div>
<div style="background-color:blue; height:33%;" onmousemove="this.style.background='black';">Box 2</div>
<div style="background-color:orange; height:33%;" onmousemove="this.style.background='black';">Box 3</div>
</body>
</html>
When you move the mouse over the elements, all become black. What doesn't it happen when I am using ontouchmove?
By the way, I am aware of the Android bug that needs to use "preventDefault()". I tried to use preventDefault method of the event on my actual game code but it still does the same.
Thank you in advance.
Cheers, Joan