Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Dispatch click when touchmove was cancled #39

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Dispatch click when touchmove was cancled #39

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8b15285
Dispatch click-event when touchmove was cancled (Apple Pencil related…
Aug 8, 2017
045b326
Typo removeEventlistener
Aug 8, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 39 additions & 0 deletions inobounce.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,12 @@
// Store enabled status
var enabled = false;

// Stores element on which touch-action started
var startElement = null;

// Stores information if a custom click event needs to be dispatched on touch-end
var needClick = false;

var handleTouchmove = function(evt) {
// Get the element that was scrolled upon
var el = evt.target;
Expand Down Expand Up @@ -47,6 +53,7 @@
// Stop a bounce bug when at the bottom or top of the scrollable element
if (isAtTop || isAtBottom) {
evt.preventDefault();
setClickReminder(evt);
}

// No need to continue up the DOM, we've done our job
Expand All @@ -59,24 +66,56 @@

// Stop the bouncing -- no parents are scrollable
evt.preventDefault();
setClickReminder(evt);
};

var handleTouchstart = function(evt) {
// Store the first Y position of the touch
startY = evt.touches ? evt.touches[0].screenY : evt.screenY;
needClick = false;
startElement = evt.target;
};

var setClickReminder = function(evt) {
var curX = evt.touches ? evt.touches[0].screenX : evt.screenX;
var curY = evt.touches ? evt.touches[0].screenY : evt.screenY;
var clientRect = startElement.getBoundingClientRect();
needClick = (
clientRect.top < curY &&
clientRect.bottom > curY &&
clientRect.left < curX &&
clientRect.right > curX
);
}

var handleTouchEnd = function(evt) {
if (needClick && startElement != null && startElement === evt.target) {
var event = new MouseEvent(
"click", {
"view": window,
"bubbles": true,
"cancelable": true
}
);
startElement.dispatchEvent(event);
}
needClick = false;
startElement = null;
}

var enable = function() {
// Listen to a couple key touch events
window.addEventListener('touchstart', handleTouchstart, false);
window.addEventListener('touchmove', handleTouchmove, false);
window.addEventListener('touchend', handleTouchEnd, false);
enabled = true;
};

var disable = function() {
// Stop listening
window.removeEventListener('touchstart', handleTouchstart, false);
window.removeEventListener('touchmove', handleTouchmove, false);
window.removeEventListener("touchend", handleTouchEnd, false);
enabled = false;
};

Expand Down