Skip to content

Commit bf3d404

Browse files
author
Sebastien Pereira
committed
Code cleanup, fix.
- moves touch-action code in touch.js - moves click handler out of utils, in events.js - fixes unexpected lostpointercapture.
1 parent 21c49da commit bf3d404

File tree

5 files changed

+87
-78
lines changed

5 files changed

+87
-78
lines changed

‎events.js

Lines changed: 36 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ define([
5050
}
5151
}
5252
}
53-
utils.registerClickHandler();
53+
registerClickHandler();
5454
this._targetElement = targetElement;
5555
};
5656

@@ -62,7 +62,7 @@ define([
6262
touch.deregisterHandlers(this._targetElement);
6363
mouse.deregisterHandlers(this._targetElement);
6464
mspointer.deregisterHandlers(this._targetElement);
65-
utils.deregisterClickHandler();
65+
deregisterClickHandler();
6666
}
6767
this._targetElement = null;
6868
};
@@ -153,11 +153,44 @@ define([
153153
insertTouchActionCSSRule("touch-action");
154154
}
155155

156-
// CSS rule for IE10 and IE11 preview
156+
// CSS rule for IE10 and IE11 preview
157157
if (feature.mspointer) {
158158
insertTouchActionCSSRule("-ms-touch-action");
159159
}
160160

161+
/**
162+
* register click handler.
163+
*/
164+
function registerClickHandler() {
165+
utils.addEventListener(window.document, "click", clickHandler, true);
166+
}
167+
168+
/**
169+
* deregister click handler
170+
*/
171+
function deregisterClickHandler() {
172+
utils.removeEventListener(window.document, "click", clickHandler, true);
173+
}
174+
175+
/**
176+
* handler for Click events.
177+
*
178+
* @param e click event
179+
*/
180+
function clickHandler(e) {
181+
if (feature.touch) {
182+
// (7) Android 4.1.1 generates a click after touchend even when touchstart is prevented.
183+
// if we receive a native click at an element with touch action disabled we just have to absorb it.
184+
// (fixed in Android 4.1.2+)
185+
if (utils.isNativeClickEvent(e) && (touch.determineTouchAction(e.target) !== utils.TouchAction.AUTO)) {
186+
e.preventDefault();
187+
e.stopImmediatePropagation();
188+
return false;
189+
}
190+
}
191+
return true;
192+
}
193+
161194
// start listening to native events
162195
pointerEvents.enable();
163196

‎handlers/touch.js

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ define([
3737
for (var l = e.changedTouches.length, i = 0; i < l; i++) {
3838
touch = e.changedTouches.item(i);
3939
touchTarget = null;
40-
touchAction = utils.getTouchAction(touch.target);
40+
touchAction = determineTouchActionFromAttr(touch.target);
4141
// before doing anything, we check if there is already an active primary pointer:
4242
// if default touch action!=auto on the target element, the touch action must be
4343
// handled by the user agent. The current event is related to a new pointer which contributes to a
@@ -301,6 +301,39 @@ define([
301301
return false;
302302
}
303303

304+
/**
305+
* With touch events there is no CSS property touch-action: Touch action
306+
* is specified by the value of the HTML attribute touch-action.
307+
* This function returns the touch action which applies to the element, based on "touch action"
308+
* from its ancestors.
309+
* To be used only when underlying native events are touch events.
310+
*
311+
* @param targetNode DOM element
312+
* @return Number touch action value which applies to the element (auto: 0, pan-x:1, pan-y:2, none: 3)
313+
*/
314+
function determineTouchActionFromAttr(targetNode) {
315+
// touch-action default value: allow default behavior (no prevent default on touch).
316+
var nodeValue = utils.TouchAction.AUTO;
317+
// find ancestors with "touch action" and define behavior accordingly.
318+
do {
319+
switch (targetNode.getAttribute && targetNode.getAttribute(utils.TouchAction.ATTR_NAME)) {
320+
case "auto":
321+
nodeValue = nodeValue | utils.TouchAction.AUTO;
322+
break;
323+
case "pan-x":
324+
nodeValue = nodeValue | utils.TouchAction.PAN_X;
325+
break;
326+
case "pan-y":
327+
nodeValue = nodeValue | utils.TouchAction.PAN_Y;
328+
break;
329+
case "none":
330+
nodeValue = nodeValue | utils.TouchAction.NONE;
331+
break;
332+
}
333+
} while ((nodeValue !== utils.TouchAction.NONE) && (targetNode = targetNode.parentNode));
334+
return nodeValue;
335+
}
336+
304337
return {
305338
/**
306339
* register touch events handlers.
@@ -355,6 +388,14 @@ define([
355388
*/
356389
releasePointerCapture: function (targetElement, pointerId) {
357390
return releaseCapture(pointerId - 2, targetElement);
391+
},
392+
393+
/**
394+
* @param targetNode DOM element
395+
* @return Number touch action value which applies to the element (auto: 0, pan-x:1, pan-y:2, none: 3)
396+
*/
397+
determineTouchAction: function (targetNode) {
398+
return determineTouchActionFromAttr(targetNode);
358399
}
359400
};
360401
});

‎handlers/touchTracker.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -101,10 +101,12 @@ define([
101101
if (!this.isActive(touchId)) {
102102
throw new Error("InvalidPointerId");
103103
}
104-
if (!targetElement || // implicit release
105-
(targetElement === t[touchId].capturedTarget)) {
104+
if (targetElement && targetElement !== t[touchId].capturedTarget) {
105+
// explicit release but capture element doesn't match
106+
return false;
107+
}
108+
if (t[touchId].capturedTarget) {
106109
t[touchId].capturedTarget = null;
107-
// capture was set at target element
108110
return true;
109111
} else {
110112
return false;

‎handlers/utils.js

Lines changed: 0 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -88,39 +88,6 @@ define([
8888
}
8989
})();
9090

91-
/**
92-
* With touch events there is no CSS property touch-action: Touch action
93-
* is specified by the value of the HTML attribute touch-action.
94-
* This function returns the touch action which applies to the element, based on "touch action"
95-
* from its ancestors.
96-
* To be used only when underlying native events are touch events.
97-
*
98-
* @param targetNode DOM element
99-
* @return Number touch action value which applies to the element (auto: 0, pan-x:1, pan-y:2, none: 3)
100-
*/
101-
utils.getTouchAction = function (targetNode) {
102-
// touch-action default value: allow default behavior (no prevent default on touch).
103-
var nodeValue = utils.TouchAction.AUTO;
104-
// find ancestors with "touch action" and define behavior accordingly.
105-
do {
106-
switch (targetNode.getAttribute && targetNode.getAttribute(utils.TouchAction.ATTR_NAME)) {
107-
case "auto":
108-
nodeValue = nodeValue | utils.TouchAction.AUTO;
109-
break;
110-
case "pan-x":
111-
nodeValue = nodeValue | utils.TouchAction.PAN_X;
112-
break;
113-
case "pan-y":
114-
nodeValue = nodeValue | utils.TouchAction.PAN_Y;
115-
break;
116-
case "none":
117-
nodeValue = nodeValue | utils.TouchAction.NONE;
118-
break;
119-
}
120-
} while ((nodeValue !== utils.TouchAction.NONE) && (targetNode = targetNode.parentNode));
121-
return nodeValue;
122-
};
123-
12491
/**
12592
* Pointer Event constructor.
12693
*
@@ -324,20 +291,6 @@ define([
324291
return true;
325292
};
326293

327-
/**
328-
* register click handler.
329-
*/
330-
utils.registerClickHandler = function () {
331-
utils.addEventListener(window.document, "click", clickHandler, true);
332-
};
333-
334-
/**
335-
* deregister click handler
336-
*/
337-
utils.deregisterClickHandler = function () {
338-
utils.removeEventListener(window.document, "click", clickHandler, true);
339-
};
340-
341294
/**
342295
* @param e event
343296
* @param nativeEvent underlying event which contributes to this pointer event.
@@ -369,25 +322,5 @@ define([
369322
}
370323
}
371324

372-
/**
373-
* handler for Click events.
374-
*
375-
* @param e click event
376-
*/
377-
function clickHandler(e) {
378-
//todo: normalize button/buttons/which values for click/dblclick events
379-
if ("ontouchstart" in document) {//todo: should use has() module instead and
380-
// (7) Android 4.1.1 generates a click after touchend even when touchstart is prevented.
381-
// if we receive a native click at an element with touch action disabled we just have to absorb it.
382-
// (fixed in Android 4.1.2+)
383-
if (utils.isNativeClickEvent(e) && (utils.getTouchAction(e.target) !== utils.TouchAction.AUTO)) {
384-
e.preventDefault();
385-
e.stopImmediatePropagation();
386-
return false;
387-
}
388-
}
389-
return true;
390-
}
391-
392325
return utils;
393326
});

‎tests/checkCoordinates.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -57,14 +57,14 @@
5757

5858
#msgLog {
5959
position: fixed;
60-
right: 0;
61-
top: 0;
62-
text-align: right
60+
right: 5px;
61+
top: 15px;
62+
text-align: right;
63+
background-color: yellow;
6364
}
6465

6566
#testArea {
6667
position: relative;
67-
top: 5%;
6868
width: 100px;
6969
height: 300px;
7070
background-color: lightgreen;

0 commit comments

Comments
 (0)