Disable Specific Touch Events

[treckstar]

Hi, great plugin. I have been using it with the Smooth Div Scroller plugin for horizontal touch scrolling and it works great. I have run into one problem that I haven't been able to solve.

Lets say I only want to be able to scroll horizontally, left or right. Is there any way I can configure the Kinetic plugin to not listen to up and down touch swipes? As in, when someone swipes the Kinetic container vertically, the page still scrolls down as normal? I have been unable to found a way to configure or modify the Kinetic plugin to do so. Any advice or help on a place to start with this would be fabulous.

Thank you all for your time.

[jblotus]

not sure if you know about this:
$('#elem').kinetic({ y: false });

that will lock the y-axis. not sure if it solves your issue though

http://jsfiddle.net/mPvDu/

[treckstar]

@jblotus Thanks for your reply. The plugin that I use, that uses Kinetic, already sets y: false on initialization, and that part works. The image doesn't scroll vertically. The part that is stumping me is that the up and down swipe default behavior is still disabled on the page.

[jblotus]

the default event is probably being prevented from bubbling, but let's see
what Dave says.

On Mon, Mar 4, 2013 at 4:06 PM, Brandon Trecki [email protected]:

@jblotus https://github.com/jblotus Thanks for your reply. The plugin
that I use, that uses Kinetic, already sets y: false on initialization, and
that part works. The image doesn't scroll vertically. The part that is
stumping me is that the up and down swipe default behavior is still
disabled on the page.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/33#issuecomment-14405511
.

[treckstar]

Well a quick and extremely dirty solution for me was to comment out the event prevent default & prop calls. Not sure how that may affect the rest of the plugin but everything still seems to be working.

[davetayls]

ok, let me see if I have this right, you would like to have kinetic listen for horizontal gestures but allow vertical gestures to be passed through (or visa-versa)?

[davetayls]

If that is the case, there isn't anything built in to be able to differentiate between the two gestures.

That said, we already have velocity and velocityY, so theoretically inputMove could be modified to return a boolean whether any movement has been captured based on a minimum velocity in each direction.

eg if y = false and velocity < 5 and velocityY > 5 then don't prevent the event bubbling. (NB these are theoretical numbers)

[treckstar]

Yes, you are correct. I would like Kinetic element to respond to horizontal gestures, but when a vertical gesture is imposed on this element the page scrolls upwards or downwards. (default behavior for touch device).

I suppose this isn't necessarily an issue, but a feature request. Commenting out the prevent default and prop lines for touch and input event's made this work for me. I've been testing and everything seems good still. The only issue I run into is when sloppily scrolling horizontally I sometimes get pushed up or down a little.

I just read your comment while writing this.. thank you for that input! I will try and see if I can make this better.

[ghost]

Is that this problem is solved? Because I have the same problem on touch device. If you have a full width container (that have a height higher than ipad resolution for example), jquery kinetic can't be use on touch device. Because, it's impossible to see/to scroll the content under or above the kinetic container.

[davetayls]

@treckstar have you had a go at this? if you have updated the code please can you send a pull request

[dayoweb]

Hi there. I came across this thread today whilst searching for the same resolution of enabling the page scroll. I have implemented davetayls' suggestion above, checking the 2 velocity values, and it seems to work.

I changed the 'touchMove' and 'inputMove' events like so:

touchMove: function (e) {
if (mouseDown) {
if (inputmove(e.touches[0].clientX, e.touches[0].clientY)) {
if (e.preventDefault) { e.preventDefault(); }
}
}
}

inputMove: function (e) {
if (mouseDown) {
if (inputmove(e.clientX, e.clientY)) {
if (e.preventDefault) { e.preventDefault(); }
}
}
}

Then at the bottom of the 'inputmove' method I added the following to return true or false:

if (!settings.y && settings.velocity < 5 && settings.velocityY > 5) {
return false;
}

return true;

When you attempt the vertical scroll the page does indeed scroll but there is a little horizontal movement of the widget afterwards, so it does need some tweaking for sure. But the basic fix is there, hope it helps :)

[davetayls]

great cheers @madaboutnoggins can you branch it and send a pull request and i'll start a branch for us to tweak where you have got to.

[davetayls]

I've done some tweaks to stop it jumping, please can you guys give it a test as well. it's on my touch-axis branch

[davetayls]

Has anyone given this a test?

[moosh74]

Hi,
This does not work for me.

[davetayls]

did you test it on the right branch?

[moosh74]

Yes

[moosh74]

By commenting preventDefault and stopPropagation, it's working!

[davetayls]

what lines? I'm not sure you're testing the right thing...also there were cases when you do want to preventDefault etc

[skovhus]

Any news on this?

[davetayls]

@skovhus next step on this is to add a setting for how far the mouse has to move before starting to drag... ie about 10 pixels

then it's easier to determine at that point if the gesture (ie up / down or left/ right) based on the start position.

[robryanx]

At the simplest level it seems enough to stop the preventdefault on y movement like this:

touchMove: function (e){
var touch;
if (self.mouseDown){
touch = e.originalEvent.touches[0];
self._inputmove(touch.clientX, touch.clientY);
if (e.preventDefault && (self.settings.y || Math.abs(self.velocityY) < 5)) {
e.preventDefault();
}
}
},

Probably best to prevent the movement in the X while someone is scrolling the Y, although this wouldn't be behaviour everyone would want.

I think it does make sense to have the event passed up by default if that axis is disabled.

[chpio]

any chance this gets pulled into the stable branch?

[davetayls]

I'm really stacked at the moment but happy to take a look at any pull requests then either @skovhus or myself could merge them in

[davetayls]

@robryanx could you implement your idea and give it a test?

[shiftedpixel]

Has this feature been implemented yet? I've followed the thread above but i'm still having no luck. I would like to have kinetic listen/work for horizontal gestures but allow vertical gestures to be ignored. Mainly to support iOS standard scrolling.

[davetayls]

There haven't been any pull requests with this feature and I haven't got the time to implement it myself at the moment. If anyone has successfully implemented something and can submit a pull request i will test and merge in

[pRoy24]

Yes,
Setting {'y':false} and
going to source code and commenting out the e.preventDefault() method made this work for me too.
I think this should be a feature because almost all mobile apps have vertical scroll.
Thamls

[davetayls]

@jordanblink, send a pull request through so the implementation can be discussed

[LoseCryBlame]

So for all the newbs out there like myself...

In jquery.kinetic.js search for:
"touchMove: function (e){"
and change:
"if (e.preventDefault ){"
to:
"if (e.preventDefault && ( self.settings.y || Math.abs( self.velocityY ) < 5 ) ){"

[krisimmig]

thanks @LoseCryBlame, that works!

[ARS81]

+1 for it to be merged