Skip to content

Commit 44c63a4

Browse files
author
Michal Aichinger
committed
Touchr got broken when Pointer event started on scrollable element or scrollbar itself.
See e.g. discussion on hammerjs/hammer.js#478 Solution is to listen on "pointercancel" event too. Added another test page to validate that Touchr behaves correctly.
1 parent 343f70d commit 44c63a4

File tree

4 files changed

+107
-3
lines changed

4 files changed

+107
-3
lines changed

‎js/touchr.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
POINTER_DOWN = IE_11_PLUS ? "pointerdown" : "MSPointerDown",
2222
POINTER_UP = IE_11_PLUS ? "pointerup" : "MSPointerUp",
2323
POINTER_MOVE = IE_11_PLUS ? "pointermove" : "MSPointerMove",
24+
POINTER_CANCEL = IE_11_PLUS ? "pointercancel" : "MSPointerCancel",
2425
POINTER_TYPE_TOUCH = IE_11_PLUS ? "touch" : MSPointerEvent.MSPOINTER_TYPE_TOUCH,
2526
POINTER_TYPE_MOUSE = IE_11_PLUS ? "mouse" : MSPointerEvent.MSPOINTER_TYPE_MOUSE,
2627
POINTER_TYPE_PEN = IE_11_PLUS ? "pen" : MSPointerEvent.MSPOINTER_TYPE_PEN, //IE11+ has also unknown type which Touchr doesn't support
@@ -336,7 +337,7 @@
336337
}
337338
originalTarget = pointerToTarget[evt.pointerId];
338339

339-
if (evt.type === POINTER_UP) {
340+
if (evt.type === POINTER_UP || evt.type === POINTER_CANCEL) {
340341
generalTouchesHolder._remove(evt);
341342
pointerToTarget[evt.pointerId] = null;
342343

@@ -434,6 +435,7 @@
434435
doc.addEventListener(POINTER_DOWN, pointerListener, useCapture);
435436
doc.addEventListener(POINTER_MOVE, pointerListener, useCapture);
436437
doc.addEventListener(POINTER_UP, pointerListener, useCapture);
438+
doc.addEventListener(POINTER_CANCEL, pointerListener, useCapture);
437439
doc.addEventListener(GESTURE_START, gestureListener, useCapture);
438440
doc.addEventListener(GESTURE_CHANGE, gestureListener, useCapture);
439441
doc.addEventListener(GESTURE_END, gestureListener, useCapture);

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "touchr",
33
"title": "Touchr",
44
"description": "JavaScript library to mimic touch events in Microsoft browsers.",
5-
"version": "1.0.0",
5+
"version": "1.0.1",
66
"main": "js/touchr.js",
77
"homepage": "http://aichi.github.io/Touchr/",
88
"author": {

‎test.html

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,9 @@
5454
#logHead {
5555
font-weight: bold;
5656
}
57+
#logContent {
58+
white-space: pre;
59+
}
5760
</style>
5861

5962
</head>
@@ -71,7 +74,8 @@
7174
var logdiv = document.getElementById("logContent");
7275

7376
function log() {
74-
logdiv.innerHTML = "<div>" + Array.prototype.join.call(arguments, ", ") + "</div>" + logdiv.innerHTML;
77+
var txt = document.createTextNode(Array.prototype.join.call(arguments, ", ") + "\r\n");
78+
logdiv.insertBefore(txt, logdiv.firstChild);
7579
}
7680
</script>
7781

‎test_with_scrollable_elm.html

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3+
<head>
4+
<meta http-equiv="X-UA-Compatible" content="IE=10; IE=9; IE=8;" />
5+
<meta name="robots" content="index,follow" />
6+
<title>Test with scrollable element</title>
7+
<script type="text/javascript" src="js/touchr.js"></script>
8+
9+
<!-- Modernizr.touch should be true -->
10+
<!-- script type="text/javascript" src="http://modernizr.com/downloads/modernizr-latest.js"></script-->
11+
<style type="text/css">
12+
html {
13+
overflow: hidden;
14+
}
15+
body {
16+
margin: 0;
17+
padding: 0;
18+
width: 100%;
19+
height: 100%;
20+
-ms-touch-action: none;
21+
touch-action: none;
22+
position: absolute;
23+
}
24+
25+
/* Log window */
26+
#log {
27+
position: absolute;
28+
overflow: auto;
29+
width: 400px;
30+
height: 100%;
31+
left: 0;
32+
font-family: Consolas;
33+
font-size: 12px;
34+
}
35+
36+
#clear {
37+
position:absolute;
38+
left: 400px;
39+
}
40+
41+
#logHead {
42+
font-weight: bold;
43+
}
44+
#logContent {
45+
white-space: pre;
46+
}
47+
</style>
48+
49+
</head>
50+
<body id="body">
51+
<div id="x" style="width: 200px; height: 200px; overflow-y: scroll;">
52+
<div id="in" style="height: 1000px"></div>
53+
</div>
54+
55+
<div id="log">
56+
<div id="logHead">type, touches#, changed#, [0]screenX/Y, [1]screenX/Y</div>
57+
<div id="logContent"></div>
58+
</div>
59+
60+
<button id="clear" onclick="document.getElementById('logContent').innerText='';">Clear</button>
61+
62+
<script type="text/javascript">
63+
//logging
64+
var logdiv = document.getElementById("logContent");
65+
66+
function log() {
67+
var txt = document.createTextNode(Array.prototype.join.call(arguments, ", ") + "\r\n");
68+
logdiv.insertBefore(txt, logdiv.firstChild);
69+
}
70+
71+
function listener(e) {
72+
var len = e.touches ? e.touches.length : 0;
73+
log(
74+
e.type,
75+
len ? len : 0,
76+
e.changedTouches ? e.changedTouches.length : "-",
77+
e.target.nodeName+"#"+e.target.id,
78+
len > 0 ? e.touches[0].screenX : "-",
79+
len > 0 ? e.touches[0].screenY : "-",
80+
len > 1 ? e.touches[1].screenX : "-",
81+
len > 1 ? e.touches[1].screenY : "-"
82+
);
83+
}
84+
85+
// Triggering the events for this element
86+
var elm = document.body;
87+
88+
elm.addEventListener("touchstart", listener, false);
89+
elm.addEventListener("touchmove", listener, false);
90+
elm.addEventListener("touchend", listener, false);
91+
92+
elm.addEventListener("gesturestart", listener, false);
93+
elm.addEventListener("gesturechange", listener, false);
94+
elm.addEventListener("gestureend", listener, false);
95+
</script>
96+
97+
</body>
98+
</html>

0 commit comments

Comments
 (0)