I have an animation in HTML5 Canvas that simulates scrolling when the user clicks and drags. It moves vertically when the screen is vertical and horizontally when horizontal.
this.scroll = function(e) {
// scroll behavior for canvas
// feed x movements into horizontal (true) comic, y movments into (false) vertical
// this number is zero or less, hence added to displacements
comic.readShift += (comic.orientation ? e.movementX : e.movementY);
// ... other code here
comic.drawPanels();
};
Listeners hook this up:
canvas.addEventListener("mousedown", function(e) {
canvas.addEventListener("mousemove", comic.scroll);
});
canvas.addEventListener("mouseup", function(e) {
canvas.removeEventListener("mousemove", comic.scroll);
});
canvas.addEventListener("mouseleave", function(e) {
canvas.removeEventListener("mousemove", comic.scroll);
});
This works, as far as I can tell, on desktop browsers. But now I'm trying to get it to work on mobile. With no equivalent for movement[X|Y] for touch events, I tried this for the scroll behavior...
this.drag = function(e) {
// scroll behavior on touch screen
var touch = e.changedTouches[0];
var movementX = comic.touchstart.screenX - touch.screenX;
var movementY = comic.touchstart.screenY - touch.screenY;
// decrement in this case
comic.readShift -= (comic.orientation ? movementX : movementY);
// ... other code here
comic.drawPanels();
};
comic.touchstart gets recorded by the touchstart listener:
canvas.addEventListener("touchstart", function(e) {
comic.touchstart = e.changedTouches[0];
canvas.addEventListener("touchmove", comic.drag);
});
canvas.addEventListener("touchend", function(e) {
canvas.removeEventListener("touchmove", comic.drag);
});
canvas.addEventListener("touchcancel", function(e) {
canvas.removeEventListener("touchmove", comic.drag);
});
Which isn't very good. It'll function if the user swipes really slowly, but normal swiping causes weird acceleration of the scrolling effect and finally borks the page. Do Touch events have movementX and movementY equivalents? If not, what's the right way to set this up?
Related
Using the latest Chrome, I have notice that event mousemove fires after mousedown or mouseup even if the mouse is left at the same position.
I have this odd behavior attaching an event listener on document.documentElement.
Same script on latest Firefox works fine, issue seems on Chrome only.
Why does this event fire?
Is there any reasonable solution?
http://jsbin.com/cefoteleqo/1/
document.documentElement.addEventListener('mousedown', function(event){
console.log('mousedown', event.pageX, event.pageY);
}.bind(this));
document.documentElement.addEventListener('mouseup', function(event){
console.log('mouseup', event.pageX, event.pageY);
}.bind(this));
document.documentElement.addEventListener('mousemove', function(event){
console.log('mousemove <<<<', event.pageX, event.pageY);
}.bind(this));
Issue appears on Win 8.1:
Chrome Version 42.0.2311.135 m
Chrome Version 44.0.2398.0 canary (64-bit)
I have notice that mousemove fire at the same time or within a really short distance (10 milliseconds) after mousedown pr mouseup are fired.
So a possible work is to use event.timeStamp on mousemove for comparisons.
The following script check if mousemove event fired "to soon" and print the result in console accordingly.
Another possible solution could be checking the position of the mouse when cb for mousemove is executed.
Both solution are just a work around to this Chrome Bug.
Solution based on timeStamp:
http://jsbin.com/jedotomoxu/1/
Solution based on mouse position:
http://jsbin.com/dinororaju/1/
<script>
var timeDownUp = null;
function start() {
document.documentElement.addEventListener('mousedown', function (event) {
timeDownUp = new Date().getTime();
console.log('mousedown', event.pageX, event.pageY, event.timeStamp);
}.bind(this));
document.documentElement.addEventListener('mouseup', function (event) {
timeDownUp = new Date().getTime();
console.log('mouseup', event.pageX, event.pageY, event.timeStamp);
}.bind(this));
document.documentElement.addEventListener('mousemove', function (event) {
var timeMove = new Date().getTime();
timeDownUp += 10;
if (timeMove > timeDownUp) {
console.log('mousemove', event.pageX, event.pageY, event.timeStamp);
if (event.which === 1) {
console.log('mousemove DRAG', event.pageX, event.pageY, event.timeStamp);
}
} else {
timeDownUp = null;
}
}.bind(this));
}
</script>
I came across this issue as well. The above solution was a bit too much for me. I am not sure if my solution works on all browsers but I can confirm it does work in the version of chrome I am currently running: Version 48.0.2564.109 m
svg.element.addEventListener('mousemove', mouseMoved);
svg.element.addEventListener('mousedown', mouseDown);
var mouseDownTriggered = false;
function mouseDown(evt)
{
console.log('mouse down');
mouseDownTriggered = true;
}
function mouseMoved(evt)
{
if (mouseDownTriggered)
{
mouseDownTriggered = false
}
else
{
console.log('mouse moved');
}
}
I noticed the order is always mouse (down -> up -> moved) when you mouse down.
So I just flag the mouse down and have the mouse move absorb the call.
I'd like to set up Hammer.js so that I can respond to horizontal pan events. My first attempt looks like this:
var mc = new Hammer(document.body);
mc.on("panleft panright", runBind(this, 'updatePosition'));
mc.on("panend", runBind(this, 'finalisePosition'));
This almost gets the behaviour that I'm looking for: if I pan left or right, the updatePosition function is called, and when I stop panning the finalisePosition function is called.
But these functions are also triggered if the gesture drifts left or right while scrolling vertically. For example, suppose I touch near the top of the screen then drag my finger down half the screen: that should register as a scroll event. Now suppose that I continue by dragging diagonally: downwards and to the left. In this scenario, I'd like to ignore the horizontal part of the gesture and treat the gesture as a vertical scroll event only, but Hammer.js is triggering the panright and panleft events as before.
My next attempt looks like this:
var mc = new Hammer(document.body, {
recognizers: [
[Hammer.Swipe],
[
Hammer.Pan,
{event: 'panvertical', direction: Hammer.DIRECTION_VERTICAL}
],
[
Hammer.Pan, // RecognizerClass
{direction: Hammer.DIRECTION_HORIZONTAL}, // options
['swipe'], // recognizeWith
['panvertical'] // requireFailure
],
]
});
mc.on("panleft panright", runBind(this, 'updatePosition'));
mc.on("panend", runBind(this, 'finalisePosition'));
This specifies that the horizontal pan events should only be triggered if the panvertical event has failed. Sure enough, this prevents the problem I described above. If I begin a vertical scrolling gesture then start to move horizontally, the panleft and panright events are not triggered. But this version has a more serious probelem: the default scroll behaviour doesn't happen! As a result it's impossible to scroll the app.
Can anyone suggest a better solution?
I'm using Hammer.js version 2.0.4.
I've had the same problem and
I've managed to make it work with this really ugly code
var first = false, lock = false;
var containerHandler = function(event) {
if(event.type == 'panend' || event.type == 'pancancel') {
// iOS bug fix
lock = false;
first = false;
} else if(event.type == 'swipe' && event.direction & Hammer.DIRECTION_VERTICAL) {
// iOS bug fix
lock = true;
first = true;
}
else if(event.type == 'panmove') {
// iOS bug fix ...
if(first === false && event.direction & Hammer.DIRECTION_VERTICAL) {
lock = true;
}
first = true;
if(lock === true)
return;
//your code etc...
};
var focusMC = new Hammer.Manager(mainContainer[0], {domEvents:true});
var pan = new Hammer.Pan({threshold: 5, direction:Hammer.DIRECTION_HORIZONTAL});
focusMC.add( pan );
focusMC.on('panstart panmove panend pancancel swipe', containerHandler);
small threshold is important..
As far as I remember this issue was only on iOS Safari, but on WP it worked correctly even without this code
Edit: Instead of the solution above, try forcing the touch-action property
to pan-y
I'm keeping both answers as they should all work
Hammer.js will automatically infer a touch-action property based on your recognizers. This might make the application more responsive, but it won't prevent vertical page scrolling just because a user is interacting with the element.
I had the same problem you were having, and found a dead simple solution that works pretty well for a workaround.
var isScrolling = false;
var galleryHammer = new Hammer(element, {
recognizers: [
[Hammer.Pan, { direction: Hammer.DIRECTION_HORIZONTAL }]
]
});
// Making the event listener passive means we don't get any delays between
// the user scrolling and the browser having checked if it should prevent
// that event
window.addEventListener('scroll', function() {
isScrolling = true;
}, { passive: true });
window.addEventListener('touchend', function() {
isScrolling = false;
});
galleryHammer.on('pan', function(event) {
if (isScrolling) {
return;
}
// Normal logic...
});
This worked for me (the code comes from a class, and this.hm is simply an Hammer instance):
this.hm.on('panleft', function(e){ // ...and same for panright
if(e.pointerType == 'touch' && (Math.abs(e.deltaY) > Math.abs(e.deltaX))){ return false; }
// do stuff
}
The extra pointerType check is there because I didn't have any issue on desktop computer (mouse events). So the whole is applied ony on touch devices/events.
I have some code which changes the class of a table. On a phone, sometimes the table will be too wide for the screen and the user will drag/scroll about to see the contents. However, when they touch and drag the table around, it triggers touchend on every drag.
How do I test to see whether the touchend came as a result of a touch-drag? I tried tracking dragstart and dragend but I couldn't get that to work and it seems an inelegant approach. Is there something I could add to below which would essentially determine, "Did this touchend come at the end of a drag?"
$("#resultTable").on("touchend","#resultTable td",function(){
$(this).toggleClass('stay');
});
My thanks in advance for your help.
PS - using latest jquery, and while a regular click works, it is very slow in comparison to touchend.
Use two listeners:
First set a variable to false:
var dragging = false;
Then ontouchmove set dragging to true
$("body").on("touchmove", function(){
dragging = true;
});
Then on drag complete, check to see if dragging is true, and if so count it as a dragged touch:
$("body").on("touchend", function(){
if (dragging)
return;
// wasn't a drag, just a tap
// more code here
});
The touch end will still fire, but will terminate itself before your tap script is run.
To ensure the next time you touch it isn't already set as dragged, reset it back to false on touch down.
$("body").on("touchstart", function(){
dragging = false;
});
Looks like one solution to my problem is found here:
http://alxgbsn.co.uk/2011/08/16/event-delegation-for-touch-events-in-javascript/
This bit of code detects any move after touchstart in order to abort tap behavior after tapend.
var tapArea, moved, startX, startY;
tapArea = document.querySelector('#list'); //element to delegate
moved = false; //flags if the finger has moved
startX = 0; //starting x coordinate
startY = 0; //starting y coordinate
//touchstart
tapArea.ontouchstart = function(e) {
moved = false;
startX = e.touches[0].clientX;
startY = e.touches[0].clientY;
};
//touchmove
tapArea.ontouchmove = function(e) {
//if finger moves more than 10px flag to cancel
//code.google.com/mobile/articles/fast_buttons.html
if (Math.abs(e.touches[0].clientX - startX) > 10 ||
Math.abs(e.touches[0].clientY - startY) > 10) {
moved = true;
}
};
//touchend
tapArea.ontouchend = function(e) {
e.preventDefault();
//get element from touch point
var element = e.changedTouches[0].target;
//if the element is a text node, get its parent.
if (element.nodeType === 3) {
element = element.parentNode;
}
if (!moved) {
//check for the element type you want to capture
if (element.tagName.toLowerCase() === 'label') {
alert('tap');
}
}
};
//don't forget about touchcancel!
tapArea.ontouchcancel = function(e) {
//reset variables
moved = false;
startX = 0;
startY = 0;
};
More here:
https://developers.google.com/mobile/articles/fast_buttons
I would say you can't tell the difference when the user drags to see more content or drag the element arround. I think you should change the approach. You could detect if it's a mobile device and then draw a switch that will enable/disable the movement of the element.
To shorten the solution of #lededge, this might help.
$("body").on("touchmove", function(){
dragging = true;
}).on("touchend", function(){
if (dragging)
return;
}).on("touchstart", function(){
dragging = false;
});
I'm creating an ad for a magazine on iPad that has a long timeline that needs to be controlled by a horizontal scrollbar. The scrollbar had to be custom, and the best plugin for custom scrolling that I could find that worked on iPads was fleXcroll.
My problem is that I'm trying to disable the ability for the user to swipe scroll the timeline. It needs to be exclusively controlled by the scrollbar (since a swipe from the user should bring them to the next page of the magazine.)
I've been looking at this problem for the past two days and the closest I can get to solving it at the moment is by controlling the touch events for the div. When I use event.preventDefault() for touchstart and touchmove on the div it works partially. If the screen has not been moved, a swipe will not move the timeline. However, after using the scrollbar, if the timeline is still moving (iPads have a sort of easing when things are swiped so that whatever is being moved slows down before stopping) you can grab the timeline and move it by swiping it. Also, if you slowly let the scrollbar stop moving with your finger on it until it stops, you can then swipe the timeline again.
So, the problem is preventing the ability for users to swipe a certain div to the side in a magazine ad for iPad. The scrolling should ONLY be controlled by the scrollbar.
Any help is greatly appreciated! Thanks!
You can register JS to observe the swipe event and then just "ignore" them and prevent them from propagating further up the chain. Something like this might help:
(function($) {
$.fn.touchwipe = function(settings) {
var config = {
min_move_x: 20,
wipeLeft: function() { alert("left"); },
wipeRight: function() { alert("right"); },
preventDefaultEvents: true
};
if (settings) {
$.extend(config, settings);
}
this.each(function() {
var startX;
var isMoving = false;
function cancelTouch() {
this.removeEventListener('touchmove', onTouchMove);
startX = null;
isMoving = false;
}
function onTouchMove(e) {
if(config.preventDefaultEvents) {
e.preventDefault();
}
if(isMoving) {
var x = e.touches[0].pageX;
var dx = startX - x;
if(Math.abs(dx) >= config.min_move_x) {
cancelTouch();
if(dx > 0) {
config.wipeLeft();
}
else {
config.wipeRight();
}
}
}
}
function onTouchStart(e)
{
if (e.touches.length == 1) {
startX = e.touches[0].pageX;
isMoving = true;
this.addEventListener('touchmove', onTouchMove, false);
}
}
this.addEventListener('touchstart', onTouchStart, false);
});
return this;
};
})(jQuery);
I created a Fiddle to demonstrate my situation.
I want to not fire the click event when the user is panning--only if it's just a simple click. I've experimented with different placements of .off() and .on() to no avail.
Thanks in advance for your help.
http://jsfiddle.net/Waxen/syTKq/3/
Updated your fiddle to do what you want. I put the re-binding of the event in a timeout so it wouldn't trigger immediately, and adjusted the mousemove to
In on click event, you can detect whether mouse was pressed DOWN or UP. So let's analyse:
DRAG:
mouse down
mosue position changes
mouse up
CLICK:
mouse down
mouse up
You see - the difference is changed mouse position. You can record click coordinate in mouse down and then compare it when muse goes back up. If it is within some treshold, the action was a click.
The only way to tell between a "click" and a "pan" would be the time the mouse has spent held down. You could create a Date in the mousedown, then another in the mouseup, and only fire your click (zoom) event if the difference between the two dates is greater than some threshold (i would guess 1/10 of a second, but you may want to experiment)
I added a "panning" bool for a solution to your problem:
see http://jsfiddle.net/syTKq/4/
Basically, if the user has mousedown and mousemove, then panning is true. once mouseup panning is false. if just mousedown, panning is false, therefore zoom.
This solution solves your problem:
var bClicking = false,
moved = false;;
var previousX, previousY;
var $slider = $('#slider'),
$wrapper = $slider.find('li.wrapper'),
$img = $slider.find('img.foo');
$img.on('click', function()
{
if(!moved)
{
doZoom();
}
});
$wrapper.mousedown(function(e) {
e.preventDefault();
previousX = e.clientX;
previousY = e.clientY;
bClicking = true;
moved = false;
});
$(document).mouseup(function(e) {
bClicking = false;
});
$wrapper.mousemove(function(e) {
if (bClicking)
{
moved = true;
var directionX = (previousX - e.clientX) > 0 ? 1 : -1;
var directionY = (previousY - e.clientY) > 0 ? 1 : -1;
$(this).scrollLeft($(this).scrollLeft() + 10 * directionX);
$(this).scrollTop($(this).scrollTop() + 10 * directionY);
previousX = e.clientX;
previousY = e.clientY;
}
});
function doZoom() {
$img.animate({
height: '+=300',
width: '+=300'
}, 500, function() {
//animation complete
});
}
Basically, it calls doZoom() only when the mouse has not moved between the mousedown and the mouseup events.
You can use the mousemove/mousedown events to set a flag that can be used in the click event handler to determine if the user was clicking or panning. Something like:
//set a flag for the click event to check
var isClick = false;
//bind to `mousedown` event to set the `isClick` flag to true
$(document).on('mousedown', function (event) {
isClick = true;
//bind to `mousemove` event to set the `isClick` flag to false (since it's not a drag
}).on('mousemove', function () {
isClick = false;
//bind to `click` event, check to see if the `isClick` flag is set to true, if so then this is a click, otherwise this is a drag
}).on('click', function () {
if (isClick) {
console.log('click');
} else {
console.log('drag');
}
});
Here is a demo: http://jsfiddle.net/SU7Ef/