diff --git a/js/ext/angular/test/scroll2.html b/js/ext/angular/test/scroll2.html new file mode 100644 index 0000000000..1aa4818562 --- /dev/null +++ b/js/ext/angular/test/scroll2.html @@ -0,0 +1,197 @@ + + + + Scroll Click Tests + + + + + + + +
CLICK!
+
Mouse Move!
+
Touch Move!
+
Touch Cancel!
+ + + + + +   + +
+ + + + + + + + + diff --git a/js/ext/angular/test/service/ionicTap.unit.js b/js/ext/angular/test/service/ionicTap.unit.js index d2bca36234..f80e927bd2 100644 --- a/js/ext/angular/test/service/ionicTap.unit.js +++ b/js/ext/angular/test/service/ionicTap.unit.js @@ -5,30 +5,13 @@ describe('Ionic Tap', function() { ionic.tap.reset(); }); - it('Should not focus on an input if it has scrolled', function() { - var targetEle = { - dispatchEvent: function() {}, - focus: function() { this.isFocused = true; } - }; - - ionic.tap.setStart({clientX: 100, clientY: 100}); - - targetEle.tagName = 'INPUT'; - var e = { - clientX: 100, clientY: 200, - preventDefault: function() {} - }; - ionic.tap.simulateClick(targetEle, e); - expect(targetEle.isFocused).toBeUndefined(); - }); - it('Should focus on an input if it hasnt scrolled', function() { var targetEle = { dispatchEvent: function() {}, focus: function() { this.isFocused = true; } }; - ionic.tap.setStart({clientX: 100, clientY: 100}); + ionic.tap.setTouchStart({clientX: 100, clientY: 100}); targetEle.tagName = 'INPUT'; var e = { @@ -46,7 +29,7 @@ describe('Ionic Tap', function() { focus: function() {} }; - ionic.tap.setStart({ clientX: 100, clientY: 100 }); + ionic.tap.setTouchStart({ clientX: 100, clientY: 100 }); var e = { clientX: 100, clientY: 100, preventDefault: function() { this.preventedDefault = true } @@ -68,46 +51,46 @@ describe('Ionic Tap', function() { e.preventedDefault = false; }); - it('Should setStart and hasScrolled true if >= touch tolerance', function() { - ionic.tap.setStart({ clientX: 100, clientY: 100 }); + it('Should setTouchStart and hasTouchScrolled true if >= touch tolerance', function() { + ionic.tap.setTouchStart({ clientX: 100, clientY: 100 }); - var s = ionic.tap.hasScrolled({ clientX: 111, clientY: 100 }); + var s = ionic.tap.hasTouchScrolled({ clientX: 111, clientY: 100 }); expect(s).toEqual(true); - s = ionic.tap.hasScrolled({ clientX: 89, clientY: 100 }); + s = ionic.tap.hasTouchScrolled({ clientX: 89, clientY: 100 }); expect(s).toEqual(true); - s = ionic.tap.hasScrolled({ clientX: 100, clientY: 107 }); + s = ionic.tap.hasTouchScrolled({ clientX: 100, clientY: 107 }); expect(s).toEqual(true); - s = ionic.tap.hasScrolled({ clientX: 100, clientY: 93 }); + s = ionic.tap.hasTouchScrolled({ clientX: 100, clientY: 93 }); expect(s).toEqual(true); - s = ionic.tap.hasScrolled({ clientX: 100, clientY: 200 }); + s = ionic.tap.hasTouchScrolled({ clientX: 100, clientY: 200 }); expect(s).toEqual(true); }); - it('Should setStart and hasScrolled false if less than touch tolerance', function() { - ionic.tap.setStart({ clientX: 100, clientY: 100 }); + it('Should setTouchStart and hasTouchScrolled false if less than touch tolerance', function() { + ionic.tap.setTouchStart({ clientX: 100, clientY: 100 }); - var s = ionic.tap.hasScrolled({ clientX: 100, clientY: 100 }); + var s = ionic.tap.hasTouchScrolled({ clientX: 100, clientY: 100 }); expect(s).toEqual(false); - s = ionic.tap.hasScrolled({ clientX: 104, clientY: 100 }); + s = ionic.tap.hasTouchScrolled({ clientX: 104, clientY: 100 }); expect(s).toEqual(false); - s = ionic.tap.hasScrolled({ clientX: 96, clientY: 100 }); + s = ionic.tap.hasTouchScrolled({ clientX: 96, clientY: 100 }); expect(s).toEqual(false); - s = ionic.tap.hasScrolled({ clientX: 100, clientY: 102 }); + s = ionic.tap.hasTouchScrolled({ clientX: 100, clientY: 102 }); expect(s).toEqual(false); - s = ionic.tap.hasScrolled({ clientX: 100, clientY: 98 }); + s = ionic.tap.hasTouchScrolled({ clientX: 100, clientY: 98 }); expect(s).toEqual(false); }); - it('Should not be hasScrolled if 0 coordinates', function() { - var s = ionic.tap.hasScrolled({ clientX: 0, clientY: 0 }); + it('Should not be hasTouchScrolled if 0 coordinates', function() { + var s = ionic.tap.hasTouchScrolled({ clientX: 0, clientY: 0 }); expect(s).toEqual(false); }); diff --git a/js/utils/activator.js b/js/utils/activator.js index 36317ba807..10e46d9299 100644 --- a/js/utils/activator.js +++ b/js/utils/activator.js @@ -44,8 +44,8 @@ document.body.removeEventListener('mousedown', ionic.activator.start); touchMoveClearTimer = setTimeout(function(){ document.body.addEventListener('touchmove', onTouchMove, false); - }, 85); - setTimeout(activateElements, 85); + }, 80); + setTimeout(activateElements, 80); } else { document.body.addEventListener('mousemove', clear, false); ionic.requestAnimationFrame(activateElements); @@ -79,7 +79,7 @@ } function onTouchMove(e) { - if( ionic.tap.hasScrolled(e) ) { + if( ionic.tap.hasTouchScrolled(e) ) { clear(); } } diff --git a/js/utils/tap.js b/js/utils/tap.js index 7e2f50870b..40a4108c47 100644 --- a/js/utils/tap.js +++ b/js/utils/tap.js @@ -10,6 +10,7 @@ var tapCoordinates = {}; // used to remember coordinates to ignore if they happen again quickly var startCoordinates = {}; // used to remember where the coordinates of the start of a touch var clickPreventTimerId; + var _hasTouchScrolled = false; // if the touchmove already exceeded the touchmove tolerance ionic.tap = { @@ -21,10 +22,10 @@ var e = orgEvent.gesture.srcEvent; // evaluate the actual source event, not the created event by gestures.js var ele = e.target; // get the target element that was actually tapped - if( ionic.tap.isRecentTap(e) || e.type === 'touchcancel' ) { + if( ionic.tap.isRecentTap(e) || ionic.tap.hasTouchScrolled(e) || e.type === 'touchcancel') { // if a tap in the same area just happened, // or it was a touchcanel event, don't continue - console.debug('tapInspect', 'isRecentTap', ele.tagName, 'type:', e.type); + console.debug('tapInspect stopEvent', e.type, ele.tagName); return stopEvent(e); } @@ -60,7 +61,7 @@ return; } - console.debug('simulateClick', ele.tagName, ele.className); + console.debug('simulateClick', e.type, ele.tagName, ele.className); var c = ionic.tap.getCoordinates(e); @@ -73,9 +74,7 @@ ele.dispatchEvent(clickEvent); if(ele.tagName === 'INPUT' || ele.tagName === 'TEXTAREA') { - if(!ionic.tap.hasScrolled(e)) { - ele.focus(); - } + ele.focus(); e.preventDefault(); } else { ionic.tap.blurActive(); @@ -108,9 +107,9 @@ // a tap has already happened at these coordinates recently, ignore this event console.debug('preventGhostClick', 'isRecentTap', e.target.tagName); - } else if(ionic.tap.hasScrolled(e)) { + } else if(ionic.tap.hasTouchScrolled(e)) { // this click's coordinates are different than its touchstart/mousedown, must have been scrolling - console.debug('preventGhostClick', 'hasScrolled'); + console.debug('preventGhostClick', 'hasTouchScrolled'); } var c = ionic.tap.getCoordinates(e); @@ -118,7 +117,7 @@ })()); - if(e.target.control || ionic.tap.isRecentTap(e) || ionic.tap.hasScrolled(e)) { + if(e.target.control || ionic.tap.isRecentTap(e) || ionic.tap.hasTouchScrolled(e)) { return stopEvent(e); } @@ -144,7 +143,9 @@ return { x:0, y:0 }; }, - hasScrolled: function(event) { + hasTouchScrolled: function(event) { + if(_hasTouchScrolled) return true; + // check if this click's coordinates are different than its touchstart/mousedown var c = ionic.tap.getCoordinates(event); @@ -218,8 +219,18 @@ } }, - setStart: function(e) { + setTouchStart: function(e) { + _hasTouchScrolled = false; startCoordinates = ionic.tap.getCoordinates(e); + document.body.addEventListener('touchmove', ionic.tap.onTouchMove, false); + }, + + onTouchMove: function(e) { + if( ionic.tap.hasTouchScrolled(e) ) { + _hasTouchScrolled = true; + document.body.removeEventListener('touchmove', ionic.tap.onTouchMove); + console.debug('hasTouchScrolled'); + } }, reset: function() { @@ -254,6 +265,6 @@ // remember where the user first started touching the screen // so that if they scrolled, it shouldn't fire the click - document.addEventListener('touchstart', ionic.tap.setStart, false); + document.addEventListener('touchstart', ionic.tap.setTouchStart, false); })(this, document, ionic);