Skip to content

Commit

Permalink
fix(tap): Prevent "clicking" when scrolling
Browse files Browse the repository at this point in the history
  • Loading branch information
Adam Bradley committed Apr 1, 2014
1 parent ee2b768 commit f3bd258
Show file tree
Hide file tree
Showing 2 changed files with 107 additions and 29 deletions.
120 changes: 99 additions & 21 deletions js/ext/angular/test/list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,20 +8,42 @@
<style>
#click-notify {
position: absolute;
top: 100px;
left: 40%;
z-index: 9997;
display: none;
top: 150px;
left: 48%;
z-index: 9999;
padding: 8px;
background: red;
color: white;
}
#mousemove-notify {
position: absolute;
top: 140px;
left: 40%;
z-index: 9998;
display: none;
padding: 8px;
background: orange;
}
#touchmove-notify {
position: absolute;
top: 180px;
left: 40%;
z-index: 9999;
display: none;
padding: 8px;
background: yellow;
}
</style>
</head>
<body ng-controller="TestCtrl">
<div id="click-notify">CLICK!</div>
<ion-side-menus>
<div id="mousemove-notify">Mouse Move!</div>
<div id="touchmove-notify">Touch Move!</div>
<!-- <ion-side-menus>
<ion-side-menu-content>

-->
<ion-header-bar class="bar-positive">
<div class="buttons">
<button ng-click="toggleDelete()" class="button button-clear">{{ editBtnText }}</button>
Expand All @@ -35,7 +57,8 @@ <h1 class="title">List Tests</h1>

<ion-content class="has-header">

<ion-list show-delete="isDeletingItems"
<ion-list
show-delete="isDeletingItems"
show-reorder="isReorderingItems"
on-refresh-holding="refreshHolding()"
on-refresh-opening="refreshOpening(ratio)"
Expand All @@ -52,7 +75,7 @@ <h1 class="title">List Tests</h1>
option-buttons="optionButtons1">

<!-- shows that the item directive does not need attributes and can get values from the list attributes -->
<ion-item item="item" ng-href="#" ng-click="itemClick()" class="item-thumbnail-left" ng-repeat="item in items" ng-class="{ active: item.isActive}">
<ion-item item="item" ng-href="#" ng-click="itemClick(item)" class="item-thumbnail-left" ng-repeat="item in items" ng-class="{ active: item.isActive}">
<img ng-src="{{item.face}}">
<h2>{{item.from}}</h2>
<p>{{item.text}}</p>
Expand Down Expand Up @@ -122,13 +145,13 @@ <h1>YELLOW {{slideBox.slideIndex}}</h1>
</ion-list>

</ion-content>

<!--
</ion-side-menu-content>
<ion-side-menu side="left">
Left menu!
</ion-side-menu>
</ion-side-menus>
</ion-side-menus> -->

<script>
angular.module('navTest', ['ionic'])
Expand All @@ -141,14 +164,38 @@ <h1>YELLOW {{slideBox.slideIndex}}</h1>

// Build Mock Data
$scope.items = [
{ from: 'Ben', face: 'https://pbs.twimg.com/profile_images/378800000571933189/278e8e1b7871a115b95fc550cd07af40.png', text: 'Whoa, whoa, whoa. There’s still plenty of meat on that bone. Now you take this home, throw it in a pot, add some broth, a potato. Baby, you\'ve got a stew going.' },
{ from: 'Adam', face: 'https://pbs.twimg.com/profile_images/2927292174/25b170ee2e3044fd936ad1319bc4b82d_bigger.jpeg', text: 'It Ain\'t Easy Being Cheesy' },
{ from: 'Tim', face: 'https://pbs.twimg.com/profile_images/378800000290028838/ee3303b02223f25cb0f9b082b55b2eeb.jpeg', text: 'Baxter! You know I don\'t speak spanish!' },
{ from: 'Brody', face: 'https://pbs.twimg.com/profile_images/378800000138067018/554c103ebf37c2ba3b923b8deea46b0d.jpeg', text: 'Sounds like some sort of marmalade' },
{ from: 'Peter', face: 'https://pbs.twimg.com/profile_images/378800000238071493/08f76337bdc91b1e1e73a9d55c57a451.jpeg', text: 'A cooked goose for everyone!' },
{ from: 'Max', face: 'https://pbs.twimg.com/profile_images/430001754747305984/qa5DFLgU.jpeg', text: 'Yes my dear man, more beans. oooohh' },
{ from: 'Andy', face: 'https://pbs.twimg.com/profile_images/423294834229522433/BSlEOBYt.jpeg', text: 'I did it all for her' },
{ from: 'Melissa', face: 'https://pbs.twimg.com/profile_images/412451928816111616/VZ3_md1N.jpeg', text: 'I think I want my money back' }
{
from: 'Ben',
face: 'https://pbs.twimg.com/profile_images/378800000571933189/278e8e1b7871a115b95fc550cd07af40.png',
text: 'Whoa, whoa, whoa. There’s still plenty of meat on that bone. Now you take this home, throw it in a pot, add some broth, a potato. Baby, you\'ve got a stew going.' },
{
from: 'Adam',
face: 'https://pbs.twimg.com/profile_images/2927292174/25b170ee2e3044fd936ad1319bc4b82d_bigger.jpeg',
text: 'It Ain\'t Easy Being Cheesy' },
{
from: 'Tim',
face: 'https://pbs.twimg.com/profile_images/378800000290028838/ee3303b02223f25cb0f9b082b55b2eeb.jpeg',
text: 'Baxter! You know I don\'t speak spanish!' },
{
from: 'Brody',
face: 'https://pbs.twimg.com/profile_images/378800000138067018/554c103ebf37c2ba3b923b8deea46b0d.jpeg',
text: 'Sounds like some sort of marmalade' },
{
from: 'Peter',
face: 'https://pbs.twimg.com/profile_images/378800000238071493/08f76337bdc91b1e1e73a9d55c57a451.jpeg',
text: 'A cooked goose for everyone!' },
{
from: 'Max',
face: 'https://pbs.twimg.com/profile_images/430001754747305984/qa5DFLgU.jpeg',
text: 'Yes my dear man, more beans. oooohh' },
{
from: 'Andy',
face: 'https://pbs.twimg.com/profile_images/423294834229522433/BSlEOBYt.jpeg',
text: 'I did it all for her' },
{
from: 'Melissa',
face: 'https://pbs.twimg.com/profile_images/412451928816111616/VZ3_md1N.jpeg',
text: 'I think I want my money back' }
];


Expand All @@ -167,12 +214,14 @@ <h1>YELLOW {{slideBox.slideIndex}}</h1>
};


$scope.itemClick = function() {
console.info('itemClick');
document.getElementById('click-notify').style.display = 'block';
$scope.itemClick = function(item) {
var el = document.getElementById('click-notify');
el.style.display = 'block';
el.innerText = 'Click! ' + item.from;

setTimeout(function(){
document.getElementById('click-notify').style.display = 'none';
}, 500);
}, 300);
};

// Item Methods/Properties
Expand Down Expand Up @@ -216,6 +265,35 @@ <h1>YELLOW {{slideBox.slideIndex}}</h1>
];

});

var mouseTimerId;
function onMouseMove(e) {
clearTimeout(mouseTimerId);
mouseTimerId = setTimeout(function(){
var el = document.getElementById('mousemove-notify');
el.style.display = 'block';
clearTimeout(mouseTimerId);
mouseTimerId = setTimeout(function(){
el.style.display = 'none';
}, 1000);
}, 0);
}

var touchTimerId;
function onTouchMove(e) {
clearTimeout(touchTimerId);
touchTimerId = setTimeout(function(){
var el = document.getElementById('touchmove-notify');
el.style.display = 'block';
clearTimeout(touchTimerId);
touchTimerId = setTimeout(function(){
el.style.display = 'none';
}, 1000);
}, 0);
}

document.addEventListener('touchmove', onTouchMove, false);
document.addEventListener('mousemove', onMouseMove, false);
</script>
</body>
</html>
Expand Down
16 changes: 8 additions & 8 deletions js/utils/tap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,10 +135,10 @@
return false;
}

return (c.x > startCoordinates.x + HIT_RADIUS ||
c.x < startCoordinates.x - HIT_RADIUS ||
c.y > startCoordinates.y + HIT_RADIUS ||
c.y < startCoordinates.y - HIT_RADIUS);
return (c.x > startCoordinates.x + TOUCH_TOLERANCE_X ||
c.x < startCoordinates.x - TOUCH_TOLERANCE_X ||
c.y > startCoordinates.y + TOUCH_TOLERANCE_Y ||
c.y < startCoordinates.y - TOUCH_TOLERANCE_Y);
}

function recordCoordinates(event) {
Expand Down Expand Up @@ -180,7 +180,6 @@
clickPreventTimerId = setTimeout(function(){
var tap = isRecentTap(e);
if(tap) delete tapCoordinates[tap.id];
startCoordinates = {};
}, REMOVE_PREVENT_DELAY);
}

Expand All @@ -206,10 +205,12 @@
}

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 the tap
var startCoordinates = {}; // used to remember where the coordinates of the start of a touch
var CLICK_PREVENT_DURATION = 1500; // max milliseconds ghostclicks in the same area should be prevented
var REMOVE_PREVENT_DELAY = 380; // delay after a touchend/mouseup before removing the ghostclick prevent
var HIT_RADIUS = 15;
var HIT_RADIUS = 15; // surrounding area of a click that if a ghostclick happens it would get ignored
var TOUCH_TOLERANCE_X = 4; // how much the X coordinates can be off between start/end, but still a click
var TOUCH_TOLERANCE_Y = 2; // how much the Y coordinates can be off between start/end, but still a click

ionic.Platform.ready(function(){

Expand All @@ -230,7 +231,6 @@

// in the case the user touched the screen, then scrolled, it shouldn't fire the click
document.addEventListener('touchstart', recordStartCoordinates, false);
document.addEventListener('mousedown', recordStartCoordinates, false);
});

})(this, document, ionic);

0 comments on commit f3bd258

Please sign in to comment.