mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
fix(tap): Prevent clicks from firing after scrolling, #579
This commit is contained in:
Adam Bradley
197
js/ext/angular/test/scroll2.html
Normal file
197
js/ext/angular/test/scroll2.html
Normal file
@@ -0,0 +1,197 @@
|
||||
<html ng-app="navTest">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Scroll Click Tests</title>
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
|
||||
<!--<link rel="stylesheet" href="../../../../dist/css/ionic.css">-->
|
||||
<script src="../../../../dist/js/ionic.bundle.js"></script>
|
||||
<style>
|
||||
#click-notify {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9997;
|
||||
display: none;
|
||||
padding: 8px;
|
||||
background: red;
|
||||
color: white;
|
||||
}
|
||||
#mousemove-notify {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 0;
|
||||
z-index: 9998;
|
||||
display: none;
|
||||
padding: 8px;
|
||||
background: orange;
|
||||
}
|
||||
#touchmove-notify {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
display: none;
|
||||
padding: 8px;
|
||||
background: yellow;
|
||||
}
|
||||
#touchcancel-notify {
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
display: none;
|
||||
padding: 8px;
|
||||
background: purple;
|
||||
color: white;
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
background: blue;
|
||||
margin: 40px 80px;
|
||||
padding: 40px;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
text-decoration: none;
|
||||
}
|
||||
.activated {
|
||||
background: yellow;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="click-notify">CLICK!</div>
|
||||
<div id="mousemove-notify">Mouse Move!</div>
|
||||
<div id="touchmove-notify">Touch Move!</div>
|
||||
<div id="touchcancel-notify">Touch Cancel!</div>
|
||||
|
||||
<ion-view title="Home" hide-nav-bar="true">
|
||||
|
||||
<ion-content class="" scroll="false">
|
||||
|
||||
<a href='#' id="link"> </a>
|
||||
|
||||
<div id="logs"></div>
|
||||
|
||||
</ion-content>
|
||||
|
||||
</ion-view>
|
||||
|
||||
<script>
|
||||
angular.module('navTest', ['ionic']);
|
||||
|
||||
var mouseTimerId;
|
||||
var mouseMoveCount = 0;
|
||||
function onMouseMove(e) {
|
||||
clearTimeout(mouseTimerId);
|
||||
mouseTimerId = setTimeout(function(){
|
||||
var el = document.getElementById('mousemove-notify');
|
||||
el.style.display = 'block';
|
||||
mouseMoveCount++;
|
||||
el.innerText = 'Mouse Move! ' + mouseMoveCount;
|
||||
clearTimeout(mouseTimerId);
|
||||
mouseTimerId = setTimeout(function(){
|
||||
el.style.display = 'none';
|
||||
}, 1000);
|
||||
}, 0);
|
||||
}
|
||||
|
||||
var touchTimerId;
|
||||
var touchMoveCount = 0;
|
||||
function onTouchMove(e) {
|
||||
clearTimeout(touchTimerId);
|
||||
touchTimerId = setTimeout(function(){
|
||||
var el = document.getElementById('touchmove-notify');
|
||||
el.style.display = 'block';
|
||||
touchMoveCount++;
|
||||
el.innerText = 'Touch Move! ' + touchMoveCount;
|
||||
clearTimeout(touchTimerId);
|
||||
touchTimerId = setTimeout(function(){
|
||||
el.style.display = 'none';
|
||||
}, 1000);
|
||||
}, 0);
|
||||
}
|
||||
|
||||
var touchCancelTimerId;
|
||||
var touchCancelMoveCount = 0;
|
||||
function onTouchCancel(e) {
|
||||
clearTimeout(touchCancelTimerId);
|
||||
touchCancelTimerId = setTimeout(function(){
|
||||
var el = document.getElementById('touchcancel-notify');
|
||||
el.style.display = 'block';
|
||||
touchCancelMoveCount++;
|
||||
el.innerText = 'Touch Cancel! ' + touchCancelMoveCount;
|
||||
clearTimeout(touchCancelTimerId);
|
||||
touchCancelTimerId = setTimeout(function(){
|
||||
el.style.display = 'none';
|
||||
}, 1000);
|
||||
}, 0);
|
||||
}
|
||||
|
||||
document.getElementById('link').addEventListener('click', onClick, false);
|
||||
|
||||
function onClick(e) {
|
||||
var el = document.getElementById('click-notify');
|
||||
el.style.display = 'block';
|
||||
el.innerText = 'Click!';
|
||||
|
||||
setTimeout(function(){
|
||||
document.getElementById('click-notify').style.display = 'none';
|
||||
}, 300);
|
||||
}
|
||||
|
||||
document.addEventListener('touchmove', onTouchMove, false);
|
||||
document.addEventListener('touchcancel', onTouchCancel, false);
|
||||
document.addEventListener('mousemove', onMouseMove, false);
|
||||
|
||||
|
||||
var index = 0;
|
||||
var timeId;
|
||||
var msgs = [];
|
||||
|
||||
console.debug = function() {
|
||||
index++;
|
||||
var msg = [];
|
||||
msg.push(index);
|
||||
for (var i = 0, j = arguments.length; i < j; i++){
|
||||
msg.push(arguments[i]);
|
||||
}
|
||||
msg.push(getTime());
|
||||
|
||||
msg = msg.join(', ');
|
||||
|
||||
if(arguments[0] === 'ERROR!') msg = '<span style="color:red;font-weight:bold">' + msg + '</span>';
|
||||
|
||||
if(arguments[0] === 'touchstart') msg = '<span style="color:blue">' + msg + '</span>';
|
||||
if(arguments[0] === 'touchend') msg = '<span style="color:darkblue">' + msg + '</span>';
|
||||
|
||||
if(arguments[0] === 'mousedown') msg = '<span style="color:red">' + msg + '</span>';
|
||||
if(arguments[0] === 'mouseup') msg = '<span style="color:maroon">' + msg + '</span>';
|
||||
|
||||
if(arguments[0] === 'click') msg = '<span style="color:purple">' + msg + '</span>';
|
||||
|
||||
if(arguments[1] === 'click') msg = '<span style="color:green;font-weight:bold">' + msg + '</span>';
|
||||
if(arguments[1] === 'change') msg = '<span style="color:orange;font-weight:bold">' + msg + '</span>';
|
||||
|
||||
msgs.unshift( msg );
|
||||
|
||||
if(msgs.length > 30) {
|
||||
msgs.splice(30);
|
||||
}
|
||||
|
||||
// do this so we try not to interfere with the device performance
|
||||
clearTimeout(timeId);
|
||||
timeId = setTimeout(function(){
|
||||
document.getElementById('logs').innerHTML = msgs.join('<br>');
|
||||
}, 150);
|
||||
|
||||
};
|
||||
|
||||
function getTime() {
|
||||
var d = new Date();
|
||||
return d.getSeconds() + '.' + d.getMilliseconds();
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user