javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(tap): Prevent "clicking" when scrolling

Browse Source
This commit is contained in:
Adam Bradley
2014-04-01 10:34:35 -05:00
parent ee2b76864a
commit f3bd258c9e
2 changed files with 107 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
js/ext/angular/test/list.html
View File

@@ -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>
@@ -35,7 +57,8 @@
<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)"
@@ -52,7 +75,7 @@
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>
@@ -122,13 +145,13 @@
</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'])
@@ -141,14 +164,38 @@
// 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' }
];
@@ -167,12 +214,14 @@
};
$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
@@ -216,6 +265,35 @@
];
});
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>

16
js/utils/tap.js
View File

@@ -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) {
@@ -180,7 +180,6 @@
clickPreventTimerId = setTimeout(function(){
var tap = isRecentTap(e);
if(tap) delete tapCoordinates[tap.id];
startCoordinates = {};
}, REMOVE_PREVENT_DELAY);
}
@@ -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(){
@@ -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);